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What will you learn from this book? 

Head First Ajax is a complete learning experience for dynamic, 
imeractive weh application programming. Built for your brain, this 
book covers Jav^ScripL, XHTML, asynchronous and synchronous 
requests, the DOM, and everything else you’ll need to expand and 
revolutionize the abilities ol your web ap[)s. You’l] do more than just 
memorize methods from a framework someone else wrote, or drag 
and drop widgeis from a toulkiL By the time you're through ， you'll 
be building apps that talk to a server without page reloads, move 
items around on the screen in response to users' actions, and even 
anticipate your users— mistakes...before they’re made. 
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Why does this book look so different? 

We think yemr time is too valuable to spend struggling with new 
concepts. Using the latest research in cognitive science and learning 
theory to craft a multi-sensory learning experience, Head First Ajax 
uses a visually rich format designed for the way your brain works, 
not a text-heavy approach that puts you to sleep. 
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with this book* 
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using cijcOC 

Web Apps for a New Generation 

Tired of waiting around for your page to reload? 

Frustrated by clunky web application interfaces? It’s time to give your web apps that 
slick, responsive desktop feel. And how do you do that? With Ajax, your ticket to 
building Internet applications that are more interactive, more responsive, and easier 
to use. So skip your nap; it’s time to put some polish on your web apps. It’s time to 
get rid of unnecessary and slow full-page refreshes forever. 
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Step 3: Create a request object 20 
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Let’s write the code for requesting an item’s details 24 

Always make sure you have a request object before working with it 25 
The request object is just an object 26 

Hey, server... will you call me back at displayDetails(), please? 27 

Use sendO to send your request 28 

The server usually returns data to Ajax requests 30 

Ajax is server-agnostic 31 

Use a callback function to work with data the server returns 35 

Get the server’s response from 

the request object’s responseText property 36 

Goodbye traditional web apps... 38 
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designing ajcDC appl!cciti9ns 

Thinking Ajaxian 

Welcome to Ajax apps — it’s a whole new web world. 

So you’ve built your first Ajax app, and you’re already thinking about how to 
change all your web apps to make requests asynchronously. But that’s not all 
there is to Ajax programming. You’ve got to think about your applications 
differently. Just because you’re making asynchronous requests, doesn’t mean 
your application is user-friendly. It’s up to you to help your users avoid making 
mistakes, and that means rethinking your entire application’s design. 
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Mike’s traditional web site sucks 

Let’s use Ajax to send registration requests ASYNCHRONOUSLY 
Update the registration page 
Event Handlers Exposed 

Set the window, onload event handler... PRO GRAMMATICALLY 

Code in your JavaScript outside of functions runs 
when the script is read 

What happens when... 

And on the server... 

Some parts of your Ajax designs will be the same... every time 

createRequestQ is always the same 

Create a request object... on multiple browsers 

Ajax app design involves both the web page 
AND the server-side program 

The request object connects your code to the web browser 
You talk to the browser, not the server 

The browser calls back your function with the server’s response 
Show the Ajax registration page to Mike... 

The web form has TWO ways to send requests to the server now 
Let’s create CSS classes for each state of the processing... 

...and change the CSS class with our JavaScript 
Changes? We don’t need no stinkin 5 changes! 

Only allow registration when it’s appropriate 
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javascript eVents 


Reacting to your users 

— Sometimes you need your code to react to other things going 

I On in your web application... and that’s where events come into the picture. 
An event is something that happens on your page, in the browser, or even on a web 


server. But it’s not enough to just know about events... sometimes you want to respond to 
them. By creating code, and registering it as an event handler, you can get the browser 


to run your handler every time a particular event occurs. Combine events and handlers, 


and you get interactive web applications. 
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It all started with a downward-facing dog... 94 

Ajax apps are more than the sum of their parts 101 

Here’s Marcy’s XHTML... 102 

Events are the key to interactivity 104 

Connect events on your web page to event handlers 

in your JavaScript 107 

Use window, onload event to initialize the interactivity on a web page 108 

Change those left-side images to be clickable 113 

Use your XHTML’s content and structure 114 

Add the code for hideHintQ, too 117 

Tabs: an optical (and graphical) illusion 118 

Use a for... loop to cycle through the images 119 

CSS classes are the key (again) 120 

Ummm... but the tabs aren’t <a>’s ! 121 

This broke our JavaScript, too, didn’t it? 122 

Use a request object to fetch the class details from the server 127 

Two functions changing the same part of a web page 128 

When you need to change images in your script, 

think “change CSS classes” 133 

Links in XHTML are represented by <a> elements 134 

We need a function to show an active button and hide a button, too 135 
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multiple eVent liancllers 

wo’s company 

single event handler isn’t always enough. 


ometimes you’ve got more than one event handler that needs to be called by an 


event. Maybe you’ve got some event-specific actions, as well as some generic 
code, and stuffing everything into a single event handler function won’t cut it. Or 
maybe you’re just trying to build clean, reusable code, and you’ve got two bits of 


functionality triggered by the same event. Fortunately, we can use some DOM 
Level 2 methods to assign multiple handler functions to a single event. 


An event can have only one event handler 

attached to it (or so it seems) 140 

Event handlers are just properties 141 

A property can have only ONE value 141 

Assign multiple event handlers with addEventListener() 142 

Objects can have multiple event handlers 

assigned to a single event in DOM Level 2 144 

What’s going on with Internet Explorer? 148 

Internet Explorer uses a totally different event model 149 

attachEventQ and addEventListener() are functionally equivalent 149 

addEventHandler() works for ALL apps, not just Marcy’s yoga page 154 
Let’s update initPageQ to use our new utility function 155 

Use an alertQ to troubleshoot 157 

So what else could be going wrong? 157 

Event handlers in IE are owned by IE’s event framework 159 

attachEventO and addEventListener() 

supply another argument to our handlers 160 

We need to name the Event argument, 

so our handlers can work with it 161 

You say target, I say srcElement... 162 

So how do we actually GET the object that triggered the event? 166 
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t’s like renewing your driver’s license 

re you tired of waiting around? Do you hate long delays? 
ou can do something about it with asynchrony! 

uVe already built a couple of pages that made asynchronous requests to the 
server to avoid making the user sit around waiting for a page refresh. In this chapter, 
we’ll dive even deeper into the details of building asynchronous applications. 

You’ll find out what asynchronous really means, learn how to use multiple 
asynchronous requests, and even build a monitor function to keep all that 
asynchrony from confusing you and your users. 


What does asynchronous really mean? 

You’ve been building asynchronous apps all along 
But sometimes you barely even notice... 

Speaking of more server-side processing... 

(More) Asynchrony in 3 easy steps 

We need two password fields and a <div> for the cover images 

If you need new behavior, you probably need 
a new event handler function 

With ONE request object, send and receive ONE asynchronous request 

Asynchronous requests don’t wait on anything... including themselves! 

If you’re making TWO separate requests, 
use TWO separate request objects 

You can’t count on the ORDERING of your requests and responses 

A monitor function monitors your application 
from OUTSIDE the action 

You call a monitor function when action MIGHT need to be taken 
Status variables let monitors know what’s going on 
And now for our last trick... 

Synchronous requests block ALL YOUR CODE from doing anything 

Use setlntervalQ to let JavaScript run your process, 
instead of your own code 
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the document object model 

eb Page Forestry 

Wanted： easy-to-update web pages. It s time to take things into your own 
hands and start writing code that updates your web pages on the fly. Using the Document 
bject Model, your pages can take on new life, responding to users’ actions, and you can 
ditch unnecessary page reloads forever. By the time you’ve finished this chapter, you’ll be 
able to find, move, and update content virtually anywhere on your web page. 



You can change the CONTENT of a page... 230 

...or you can change the STRUCTURE of a page 231 

Browsers use the Document Object Model to represent your page 232 
Here’s the XHTML that you write... 234 

...and here’s what your browser sees 235 

Your page is a set of related objects 237 

Let’s use the DOM to build a dynamic app 244 

You start with XHTML... 246 

appendChild() adds a new child to a node 255 

You can locate elements by name or by id 256 

Interview with a new parent 259 

Gan I move the clicked tile? 260 

You can move around a DOM tree using FAMILY relationships 262 

A DOM tree has nodes for EVERYTHING in your web page 272 

The nodeName of a text node is 274 

Did I win? Did I win? 278 

But seriously... did I win? 279 
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My wish is your command 

DPM 

Sometimes you just need a little%i^l control. 

It’s great to know that web browsers turn your XHTML into DOM trees. And you can do a 
lot by moving around within those trees. But real power is taking control of a DOM tree 
and making the tree look like you want it to. Sometimes what you really need is to add 
a new element and some text, or to remove an element, like an <img>, from a page 
altogether. You can do all of that and more with the DOM, and along the way, banish that 
troublesome innerHTML property altogether. The result? Code that can do more to a 


page, without having to mix presentation and structure in with your JavaScript. 
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Webville Puzzles... the franchise 
Woggle doesn’t use table cells for the tiles 
The tiles in the XHTML are CSS-positioned 
“We don’t want TOTALLY random letters...” 

Our presentation is ALL in our CSS 

We need a new event handler for handling tile clicks 

Start building the event handler for each tile click 

We can assign an event handler in our randomizeTiles() function 

Property values are just strings in JavaScript 

We need to add content AND structure to the “currentWord” div 

Use the DOM to change a page’s structure 

Use createElementQ to create a DOM element 

You have to TELL the browser where to put 
any new DOM nodes you create 



We need to disable each tile. That means 
changing the tile’s CSS class... 

...AND turning OFF the addLetter() event handler 

Submitting a word is just (another) request 

Our JavaScript doesn’t care how the server 
figures out its response to our request 

Usability check: WHEN can submitWord() get called? 
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frameworks and toolkits 



Trust No One 

So what’s the real story behind all those Ajax frameworks? 

If you’ve been in Webville awhile, you’ve probably run across at least one JavaScript or 
Ajax framework. Some frameworks give you convenience methods for working with 
the DOM. Others make validation and sending requests simple. Still others come with 
libraries of pre-packaged JavaScript screen effects. But which one should you use? And 
how do you know what’s really going on inside that framework? It’s time to do more than 
use other people’s code … it’s time to take control of your applications. 


Reasons to use 3 ^arwcwov-k 

So what frameworks ARE there? 

Every framework uses a different syntax to do things 

335 

336 

Reasons MOT to use a 

—— 

The syntax may change... but the JavaScript is still the same 

To framework or not to framework? 

337 

340 


The choice is up to you... 

342 



Xnil requests and responses 

More Than Words Can Say 

How will you describe yourself in 10 years? How about 20? 

Sometimes you need data that can change with your needs... or the needs of your 
customers. Data you’re using now might need to change in a few hours, or a few days, 
or a few months. With XML, the extensible markup language, your data can describe 
itself. That means your scripts won’t be filled with ifs, elses, and switches. Instead, 
you can use the descriptions that XML provides about itself to figure out how to use 
the data the XML contains. The result: more flexibility and easier data handling. 
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innerHTML is only simple for the CLIENT side of a web app 

You use the DOM to work with XML, 
just like you did with XHTML 

XML is self-describing 
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json 

SON of JavaScript 

JavaScript, objects, and notation, oh my! 

If you ever need to represent objects in your JavaScript, then you’re going to love JSON, 
JavaScript Standard Object Notation. With JSON, you can represent complex objects 
and mappings with text and a few curly braces. Even better, you can send and receive 
JSON from other languages, like PHP, C#, Python, and Ruby. 


JSON caw be text ANp aw object 



JSON can be text AND an object 
JSON data can be treated as a JavaScript object 
So how do we get JSON data from the server’s response? 

JavaScript can evaluate textual data 
Use evalQ to manually evaluate text 

Evaluating JSON data returns an object representation of that data 

JavaScript objects are already dynamic 
because they’re not compiled objects 

Access an object’s members, then get 
an object’s values with those members 

You need to PARSE the server’s response, not just EVALUATE it 
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Say what you meant to say 

Everyone makes mistakes from time to time. 

Give a human being a chance to talk (or type) for a few minutes, and they’ll probably make 
at least one or two mistakes. So how do your web apps respond to those mistakes? 
You’ve got to validate your users’ input and react when that input has problems. But who 
does what? What should your web page do? What should your JavaScript do? And what’s 
the role of the server in validation and data integrity? 


Validation should work from the web page BACK to the server 414 

You can validate the FORMAT and CONTENT of data 420 

Don’t Repeat Yourself: DRY 423 

Let’s build some more event handlers 426 

RETURN of SON of JavaScript 430 

The value of a property can be another JavaScript object 430 

Let’s warn Marcy’s customers when there’s a problem with their entry 433 
If you don’t warnQ, you have to unwarn() 437 

IF there’s a warning, get rid of it 437 

Duplicate data is a SERVER problem 443 



XVI 

























table of contents 


12 


post requests 

Paranoia: It’s your friend 

Someone’s watching you. Right now. Seriously. 

Freedom of Information Act? Isn’t that called the Internet? These days, anything a user 
types into a form or clicks on a web page is subject to inspection. Whether it’s a network 
admin, a software company trying to learn about your trends, or a malicious hacker or 
spammer, your information isn’t safe unless you make it safe. When it comes to web 
pages, you’ve got to protect your users’ data when they click Submit. 


GET requests send request parameters across the network as clear text 449 
POST requests DON’T send clear text 450 

The data in a POST request is ENCODED until it reaches the server 452 
sendO your request data in a POST request 454 

Always check to make sure your request data was RECEIVED. 456 

Why didn’t the POST request work? 458 

The server unencodes POST data 459 

We need to TELL the server what we’re sending 460 

Set a request header using setRequestHeaderQ on your request object 462 
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The Top Five Topics (we didn’t cover) 

It’s been a long ride... and you’re almost to the end. 

We can barely stand to let you go, but before you do, there’s still a few things left to 
cover. We can't possibly fit everything about Ajax into one 600-page book. So we 
threw out everything you didn’t really need to know and kept the last few important 


bits in this appendix. 



#1 Inspecting the DOM 472 

#2 Graceful degradation 475 

#3 script.aculo.us and the Yahoo UI libraries 476 

#4 Using JSON libraries in your PHP code 478 

#5 Ajax and ASP.NET 480 



utility ?unct!9ns 

Just Gimme the Code 

Sometimes you just want everything in one place. 

You’ve spent a lot of time using utils.js, our little utility class of Ajax, DOM, and event utility 
functions. Inside these pages, you’ll get all those functions in one place, ready to put into 
your own utility scripts and applications. 


utils.js: a work in progress 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 


① 

② 


Do you know HTML, some CSS, and some JavaScript? 
(You don’t need to be a guru or anything.) 

Do you want to learn, understand, and remember A^\ax, 
with a goal of developing responsive and usable web 
applications? 


③ 


Do you prefer stimulating dinner party conversation to 
dry, dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any one of these: 


① 


② 


Are you completey new to HTML or CSS or JavaScript? 
(You don’t need to be advanced, but you should definitely 
have some experience. If not, go get a copy of Head First 
HTML and CSS, today, and then come back and get this 
book.) 

Are you a kick-butt Ajax or web developer looking for a 

reference book? 


③ 


Are you afraid to try something different? Would you 
rather have a root canal than mix stripes with plaid? 

Do you believe that a technical book can’t be serious if 
servers and web browsers are anthropomorphized? 


this book is not for you. 
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Wc know what youVe thinking 


cc 


u 


How can this be a serious book on web programming? 
What’s with all the graphics?” 

Gan I actually learn it this way?” 




Wc know what your brain is thinking 

Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things you 
encounter? Everything it can to stop them from interfering with the brain’s 
real job — recording things that matter. It doesn’t bother saving the boring 
things; they never make it past the “this is obviously not important” filter. 

How does your brain know what’s important? Suppose you’re out for a 
day hike and a tiger jumps in front of you, what happens inside your head 
and body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying 
to make sure that this obviously non-important content doesn’t clutter 
up scarce resources. Resources that are better spent storing the really 
big things. Like tigers. Like the danger of fire. Like how you should 
never have posted those “party” photos on your Facebook page. 

And there’s no simple way to tell your brain, “Hey brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now, I really do want 
you to keep this stuff around.” 
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Metacognition: thinking about thinking 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 
Learn how you learn. 

Most of us didn’t take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 


I wonder how 
I can trick my brain 
into remembering 
this stuff... 



But we assume that if you’re holding this book, you really want to learn Ajax 
and web programming. And you probably don’t want to spend a lot of time. If 
you want to use what you read in this book, you need to remember what you read. 
And for that, you’ve got to understand it. To get the most from this book, or any 
book or learning experience, take responsibility for your brain. Your brain on 
this content. 


The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best 
keep the new content from sticking. 


to 


So just how DO you get your brain to treat web 
programming like it was a hungry tiger? 


There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning... 
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Here's what WE did: 

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy, saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area 
of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, or interest. 




thumbnails.js 


displayl?etails() 


We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included more than 80 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-do-able, because that’s what most people prefer. 


parpen your pencil 


We used multiple learning styles, because might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 



And we included stories and exercises that present more than one point of view, 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 


tJieretare no o 

Dumb Questi9ns 


something. Think about it — you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
Thsityou y re not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, well, because a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 


Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

(2) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3^ Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars — they } re part of the core content! 

Don’t skip them. 

^4^ Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after yow put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

(5^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

^7^ Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

Feel something. 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

^9^ Practice writing web applications! 

There’s only one way to truly master web 
programming: program web applications. And 

that’s what you’re going to do throughout this book. 
Using Ajax is a skill, and the only way to get good 
at it is to practice. We’re going to give you a lot of 
practice: every chapter has apps that we’ll build. 
Don’t just skip over them — a lot of the learning 
happens when you build these apps yourself. And 
definitely make sure you understand what’s going on 
before you move on to the next part of the book. 
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Read Me 

This is a learning experience, not a reference book. We deliberately stripped out 
everything that might get in the way of learning whatever it is we’re working on at that 
point in the book. And the first time through, you need to begin at the beginning, because 
the book makes assumptions about what you’ve already seen and learned. 


We assume you are familiar with HTML and CSS. 

It would take an entire book to teach you HTML and CSS (in fact, that’s exactly what 
it took: Head First HTML with CSS & XHTML). We chose to focus this book on Ajax 
programming, rather than rehash lots of markup and style that you could learn about in 
other places. 

We assume you’ve at least seen JavaScript code before. 

It would take an entire book to teach you... oh, wait, we’ve already said that. Seriously, 
JavaScript is a lot more than a simple scripting language, and we aren’t going to cover 
all the ways you can use JavaScript in this book. You’ll learn about all the ways that 
JavaScript is related to Ajax programming, and learn how to use JavaScript extensively to 
add interaction to your web pages and make requests to a server. 

However, if you’ve never written a line of JavaScript, aren’t at all familiar with functions 
or curly braces, or have never programmed in any language before, you might want to 
pick up a good JavaScript book and browse through it. If you want to plow into this book, 
feel free —— but we will be moving fairly quickly over the basics. 

We don’t cover server-side programming in this book. 

It’s now common to find server-side programs written in Java, PHP, Ruby, Python, Perl, 
Ruby on Rails, C#, and a whole lot more. Ajax programming works with all of these 
languages, and we have tried to represent several of them in this book’s examples. 

To keep you focused on learning Ajax, though, we do not spend much time explaining the 
server-side programs used; we’ll show you the basic inputs and outputs to the server, but 
that’s as far as we go. We believe that your Ajax applications can be written to work with 
any kind of server-side program; we also believe that you’re smart enough to apply the 
lessons learned from an example that uses PHP to one that uses Ruby on Rails or a Java 
servlet. 

You can visit us online at http:/ / www.headfirstlabs.com/books/hfajax to 

download sample server-side programs, so you can run these apps yourself. 
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We encourage you to use more than one browser with this book. 

As much as it sucks, different web browsers handle your HTML, your CSS, and your 
JavaScript in completely different ways. If you want to be a complete Ajax programmer, 
you should always test your asynchronous applications on lots of modern browsers. All the 
examples in this book were tested on recent versions of Firefox, Opera, Safari, Internet 
Explorer, and Mozilla. If you find problems, though, let us know... we promise it’s an 
accident. 

We often use tag names for element names. 

Rather than saying “the a element,” or “the ‘a’ element,” we use a tag name, like “the 
<a> element.” While this may not be technically correct (because <a> is an opening tag, 
not a full blown element), it does make the text more readable. 

The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. DonH skip the exercises. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books don’t 
have retention and recall as a goal, but this book is about learning, so you’ll see many of 
the concepts come up more than once. 


The examples are as lean as possible. 

Our readers tell us that it’s frustrating to wade through 200 lines of an example looking for 
the two lines they need to understand. Most examples in this book are shown within the 
smallest possible context, so that the part you’re trying to learn is clear and simple. Don’t 
expect all of the examples to be robust, or even complete —— they are written specifically for 
learning, and aren’t always fully functional. 


We’ve placed all the example files on the Web so you can download them. You’ll find them 

at http : //www. headfirstlabs . com/books/hf a jax/. 

The ( Brain Power’ exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning experience 
of the Brain Power activities is for you to decide if and when your answers are right. In 
some of the Brain Power exercises you will find hints to point you in the right direction. 
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Technical Reviewers: 


Bear Bibeault is a Web Applications Architect 
responsible for an enterprise financial application used by 
the accountants that many of the Fortune 500 companies 
keep in their dungeons. He also delights clients with 
web applications he creates on the side (Ajax-powered, 
of course), and serves as a sheriff (senior moderator) at 
JavaRanch.com. 

Anthony T. Holdener III is the Director of 
Information Technology for Korein Tillery, LLC, but 
was a web applications developer in his previous life as a 
programmer; he is also the author of Ajax: The Definitive 
Guide (O 5 Reilly). 

Elaine Nelson has been designing websites for nearly 10 
years. As she tells her mother, an English degree comes 
in handy everywhere. Elaine’s current musings and 
obsessions can be found at elainenelson.org. 


Pauline McNamara has worked with university 
e-Learning projects in Switzerland for the past 6 years. 
Her current learning passion involves raising an adorable 
puppy with her partner (who’s also adorable). 

Andrew Monkhouse is an administrator onJavaRanch, 
and a Java developer by day. He is currently working for 
PersonalShopper.com in the USA - a long way from his 
home in Australia. 

Fletcher Moore did all our code samples and was 
indispensable to the project. He is a web developer and 
designer at Georgia Tech. In his spare time he’s an avid 
cyclist, musician, gardener, and Red Sox fan. He resides 
in Atlanta with his wife Katherine, daughter Sailor, and 
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Safari© Pooks Online 


Safari .》 

Books Online 


When you see a Safari® icon on the cover of your favorite 
technology book that means the book is available online 
through the O’Reilly Network Safari Bookshelf. 


Safari offers a solution that’s better than e-books. It’s a virtual library that lets you 
easily search thousands of top tech books, cut and paste code samples, download 
chapters, and find quick answers when you need the most accurate, current 
information. Try it for free at http : // safari . oreilly. com. 
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Web Adds for a New 

Generation ♦ 



III just take a little nap 
while I’m waiting for my 
web app to respond... 


Tired of waiting around for your page to reload? 

Frustrated by clunky web application interfaces? It’s time to give your web apps that 
slick, responsive desktop feel. And how do you do that? With Ajax, your ticket to 
building Internet applications that are more interactive, more responsive, and easier 
to use. So skip your nap; it’s time to put some polish on your web apps. It’s time to 
get rid of unnecessary and slow full-page refreshes forever. 


this is a new chapter 


old-fashioned web apps 


Web pages: the old-fashioned approach 

With traditional web pages and applications, every time a user clicks on 
something, the browser sends a request to the server, and the server responds 
with a whole new page. Even if your user’s web browser is smart about 
caching things like images and cascading style sheets, that’s a lot of traffic 
going back and forth between their browser and your server... and a lot of 
time that the user sits around waiting for full page refreshes. 
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using ajax 


Web pages remvewted 

Using Ajax, your pages and applications only ask the server for what they 
really need — just the parts of a page that need to change, and just the parts 
that the server has to provide. That means less traffic, smaller updates, and 
less time sitting around waiting for page refreshes. 


With Ajax, the browser only sends and receives 
the parts of a page that need to change. 
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ajax is a methodology 



Okay, I get that Ajax makes web pages 
respond faster, but what exactly is it? 


Ajax is a new way of using 
existing technologies. 

Ajax isn’t a whole new technology that you 
have to learn, like CSS or JavaScript, or a set 
of graphics techniques you’ll need to crack 
open PhotoShop to accomplish. Ajax is just a 
new way of thinking about how to do what 
you y re already doing ，using technologies 
you probably already know. 
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using ajax 


So what makes a page "Ajax"? 


Ajax is a way of designing and building web pages that are as interactive and 
responsive as desktop applications. So what does that mean for you? You 
handle things at the client’s browser whenever you can. Your pages make 
asynchronous requests that allow the user to keep working instead 
of waiting for a response. You only update the things on your pages that 
actually change. And best of all, an Ajax page is built using standard Internet 
technologies, things you probably already know how to use, like: 

• XHTMl 

• Cascading Style Sheets 

• JavaScript 


Ajax applications also use a few things that have been around for a while but 
may be new to you, like: 


• The XwlHttpRequest 

• XML 备 JSON 

• The POM 
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Doesn’t Ajax stand for “Asynchronous JavaScript and 
XML ”？ 

Sort of. Since lots of pages that are considered “Ajax” 
don’t use JavaScript or XML, it’s more useful to define Ajax as a 
way of building web pages that are as responsive and interactive 
as desktop applications, and not worry too much about the exact 
technologies involved. 


What exactly does “asynchronous” mean? 

A- 

In Ajax, you can make requests to the server without 
making your user wait around for a response. That’s called an 
asynchronous request, and it’s the core of what Ajax is all 
about. 


But aren’t all web pages asynchronous? Like when 
a browser loads an image while I’m already looking at the 
page? 

Browsers are asynchronous, but the standard web page 
isn't. Usually when a web page needs information from a 
server-side program, everything comes to a complete stop until 
the server responds... unless the page makes an asynchronous 
request. And that’ what Ajax is all about. 

But all Ajax pages use that XMLHttpRequest object, 

right? 

Nope. Lots do, and we’ll spend a couple of chapters 
mastering XMLHttpRequest, but it’s not a requirement. In 
fact, lots of apps that are considered Ajax are more about user 
interactivity and design than any particular coding technique. 
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rob needs your help 


Rob’s Rock V Roll Memorabilia 

Meet Rob. He’s put all his savings into an online rock n’ roll 
memorabilia store. The site looks great, but he’s still been getting 
tons of complaints. Customers are clicking on the thumbnail images 
on the inventory page, but the customers’ browsers are taking forever 
before they show information about the selected item. Some of 
Rob’s users are hanging around, but most have just stopped coming 
to Rob’s online shop altogether. 
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Ajax pages only talk to the 
server when they have to... 
and only about what the 
server knows. 

The problem with Rob’s site isn’t that 
his server is too slow, but that his pages 
are sending requests to the server all 
the time... even when they don’t need to. 


O 
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using ajax 






^^arpen your pencil 


Here’s what Rob’s online store does right now. What’s 
wrong with this picture? 


T\\t ^ascv- 






The b\rowsc\r sehds 
the selected item’s IP 
{jo the scv - vcv . 


The usev ^c*b 

*tivcd o-f >wavt •… 3 
av\A does 
sowetWm^ else... 


XV^c Wov/sev sev^ds 
i\\t ^CV/ »-bcw S IP 
-to 七 he sevvev. 




Vfitll 


1 «s.S WjCls 


mm ■- < 

a 1 


vnaa ■ 


if 

rear 


■ J * 5 H 


"The scirvcir schds 
badk 3ho^licv~ y/holc 
hew page. 


How would Ajax change this diagram? Write down what 
you th\r\k should happen on Rob's site. 


丁 he useir dicks 

ah °thc\r ihumbhdil 


T~he scirvcir schds 

bd 匕 k d hew page, 

with 七 he sclc^cd 

i"tcm s ih-fov-r^a-tioh. 




_ ■ |shi baa 

■ BUM I 


I B ■ 
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asynchronous apps do more than one thing at once 



Your job was to think about how Ajax could help save 
Rob’s site... and his business. With Ajax, we can completely 
remove all the page refreshes on his inventory page. Here’s 
what that would look like: 



TV\c uscv t\\tVs 
a 七 





Cli^kihg ah ^alls a Tk# aV , 


a ^°[^i obj^t that 
3 sks -the scv-vcv -Pov s 

dcsdHptioh o( the it 加 . 


-fur\t*tior\ also 
^kdh^es -tKc iw»ajc 
*to 

selected itew'- 


T*hc birows^v* 
s ^hds ih c 

，蚨 obje^i 
"the sc^vc^ 
^y^h\roinously t 
bchihd s/ Ches , 


The bvoy/sev revests i\\t 
-from *bi^c scv-vcv-... bu*b *t^aVs r\o*b 

somet^m^ yoiAV pajc 赠 vies about- 



O^ly *tKc part 
<^f -tKc \>ay 
at-tually 心呼 d 
is uOpdd 七 … lou 七 
{\\t usev still sees 
a y\C>w ar\d 

i\\t St\tdtd rtew/s 


M w 

thc hCW '^3C dhd 

5 ih c 

io i hc 

us 饮、 bv-owsc^. 


BULLET POINTS - 

■ Asynchronous requests allow more than one thing to happen at the same time. 

■ Only the part of a web page that needs to change gets updated. 

■ The page isn’t frozen while the server is returning data to the browser. 
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卽 your pencil 


using ajax 


Put a checkmark next to the benefits that you think Ajax 
can provide to your web applications. 

The browser can request multiple things from the server at the same time. 
Browser requests return a lot faster. 

Colors are rendered more faithfully. 

Only the parts of the page that actually change are updated. 

Server traffic is reduced. 

Pages are less vulnerable to compatibility issues. 

The user can keep working while the page updates. 

Some changes can be handled without a server round-trip. 

Your boss will love you. 

Only the parts of the page that actually change are updated. 



Not all pages will reap every benefit of Ajax. In fact, 
some pages wouldn’t benefit from Ajax at all. Which 
of the benefits that you checked off above do you 
think Rob’s page will see? 


you are here ► 
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ajax app benefits 


^harpen your pencil 

Sobtion 


Remember, not every page is going to see all these benefits. 






v 




0 

争 


^ asy^Wo^ous you ca^ make su^rc b^rov/s^ y/orks beWd 如 

su^ts, ar>a avoid m*tcv\ruftm5 youv usc^rs full - fay rtWts^ts •—^ 

The browser can request multiple things from the server at the same time. 


Browser requests return a lot faster. 


Colors are rendered more faithfully. 


Color v*c^dcv*>ir\^ is d>t*t 3 *tcd by 
七 he usc^s w\or\i*tov*> ir\o*b Y ouV " 


Only the parts of the page that actually change are updated. 

Its possible -to nr»akc sr^allcir, move -fodused \rc<\ucsis y/iih 如乂 . Be davc-Pul, 
i*ts also easy {o make a lot rwov-c v-c^ucsts-a^d mdv-casc tv-a-f-fid- 
^ because you make all o( -those irc^ucsis asy^dh^o^ously. 

Server traffic is reduced. 

BaaiAse Ajax pajes \rcly oh -tc^Uolojics addition b> XttT/VIU 

r dor^pa-tibilily issues actually be a bio^ problem with Aja^c. 

匕 t’ iesj ； iesj you\r apps the b\rowscv-s youv- usev-s have i^s-tallcd- 

Pages are less vulnerable to compatibility issues. 

Sometimes you a usc^r Y/a*.i or. i\^t steers resist, but tKai Aotsr!i ^ you 
da^-t still use Aja%. iVc II look ai sy^dK^ro^ous vs. asy^tWo^ous \rc«\ucsts mo 代 m Uafter • 

The user can keep working while the page updates. 

ihmjs at 七 he birowscv tav\ make youv- web 
application -fed move like a desk-top applida 七 icm. 

Some changes can be handled without a server round-trip. 

l-f you use m a >/ay *tha*t helps youv- apps, -the boss 
^^ v/ill love you. Bu*t you shouldn't use Ajax evevyy/here... 

Your boss will love you. more thai laicr- 


V] Only the parts of the page that actually change are updated. 


Y^cs, -this IS -the sedoy>d time this shows uf m 七 lis 七 .| 七 ’s 七 ha 七 imfovia 的七 f 
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using ajax 



Well, yes, dear, unless 
everyone decided they d try the 
same approach. Now look at the 
mess we re in! What a jam. 




..but Howard said there's be 
much less traffic this way. 


thereicire no ^ 

Dumb Questi9ns 


First you said Ajax was the web reinvented. Now it’s 
increasing server traffic. Which is it? 

Sometimes it’s both! Ajax is one way to make requests, get 
responses, and build responsive web apps. But you’ve still got to be 
smart when deciding whether an asynchronous request or a regular 
synchronous request would be a better idea. 

How do I know when to use Ajax and asynchronous 
requests, and when not to? 

Think about it like this: if you want something to go on while 
your user’s still working, you probably want an asynchronous request. 
But if your user needs information or a response from your app 
before they continue, then you want to make them wait. That usually 
means a synchronous request. 


So for Rob’s online store, since we want users to keep 
browsing while we’re loading product images and descriptions, 
we’d want an asynchronous request. Right? 

Exactly. That particular part of Rob’s app—checking out 
different items—shouldn't require the user to wait every time they 
select a new item. So that’s a great place to use Ajax and make an 
asynchronous request. 

And how do I do that? 

Good question. Turn the page, and let’s get down to actually 
using Ajax to fix up Rob’s online store. 


you are here ► 
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rob’s ajax road map 


Ajax and rock V roll m 5 steps 

Let’s use Ajax to fix up Rob’s online store, and get his impatient customers back. 
We’ll need to make some changes to the existing XHTML page, code some 
JavaScript, and then reference the script in our XHTML. When we’re done, the 
page won’t need to reload at all, and only the things that need to change will get 
updated when users click on the thumbnail images. 

Here’s what we’re going to do: 

^ Modify the XHTML web page 

We need to include the JavaScript file we’re going to write and 
add some divs and ids, so our JavaScript can find and work 
with different parts of the web page. 


Wic’ll youf 

七 huw'l) 灼 ails m'to 
a <div>, so ouv 
JavaSdv-'ift 
locate ■tlhcw' oy \ 



inventory.html 


pay easily . 、 - ^ 






thumbnails.js 


thumbhails js will C,oy\ia\y\ 

仏 c JavaSdv-ipt code we 
w 心 hahdlihg Oh 

七 he 七 humbhdil ^hd 

"t^lkihg -to Rob’s scv-vcv* *to 

yt defiled ih-fovma-tioh 
about i-tcm. 


❻ Write a function to initialize the page 

When the inventory page first loads, we’ll need to run some JavaScript 
to set up the images, get a request object ready, and make sure the 
page is ready to use. 


TWis -tells i\\t 
Wowser *to v-uir\ 七 he 
m'rtPa^cO 
as sooh as 
loads 




window.onioad= initPage; 
function initPage() { 

K_ 

// setup the images 
// create a request object 


^11 v/ntc code m mitPa^O -to \^aW 
all i\\t -tKumUa'il imays, and sc*t u\> 
cmCkk cvc^-t kor tacM 
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function 
getPetails) 

LJ 

thumbnails.js 












❺ 


using ajax 


OYyt\\Cy 
*br 、 响 cv* 

ac*tPc*ta'»' s0 


Write a function to create a request object 

We need a way to talk to the server and get details about each piece of 
memorabilia in Rob’s inventory. We’ll write a function to create a request object to 
let our code talk to the server; let’s call it createRequest () . We can use that 
function whenever a thumbnail is clicked to get a new request started. 


function 


o 


❺ 



^ciPctaiUO will dall -the dv-ca*tcRc«\ucstO 
-ur>d*tior> to y 七 a v-c<\ucs*t objedt 



tv-ca*tcRc<\ucs-t() is a 

util*i*b7 … c’H 

use ovcv 3v\d ow. I 七 
scales a bas\t, ^tr\c 
vc'ues 七 object 


thumbnails.js 


.^ thumbnails.js 

^icRc^csiO , cW 

- obie，t 4, ou, 

匕 li 匕 k TUh^-tioh 


a 

OY\d 


io 


use. 


Get an item’s details from the server 

We’ll send a request to Rob’s server in getDetails (). 
telling the browser what to do when the server responds. 



- request 


thumbnails.js 


T\\c v-c^cs-t object 心 
*m-foV-mat»oir\ aboiA*t —a 七 
Code s^ouldi v-ur\ >n\\cv\ 
scv*vcv* responds. 



Display the item’s details 

We can change the image to display in getDetails () . Then, we 
need another function, displayDetails (), to update the item’s 
description when the server responds to our requests. 


驗 


r~^ 

I function 



TKc tMCY\i V^a^dlcv- 
ou 七 •» 啪 ay … 



Cs sir 亡 
OV/SCk- 

v 〜y 仏％ 


thumbnails.js 


”.3hd 3ho*tliC\r -Puhd."tioh 
well w\ri-tc c ， av\ take the 
sc\rvc\rs ih-foirmatioh av\d 
display it oh the web 
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modify rob’s xhtml page 


Step 1: Modify the XHTML 

Let’s start with the easy part, the XHTML and CSS that 
create the page. Here’s Rob’s current version of the inventory 
page with a few additions we’ll need: 



inventory.html 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 
<html xmlns="http :// www.w3.org/1999/xhtml"> 

<head> 

<title>Rob's Rock 'n' Roll Memorabilia</title> 

<link rel="stylesheet" href="css/default.css" / > 

<script src="scripts/th\ambnails . js" type= "text/ javascript"X/script> 

</head> 

<body> 

<div id= M wrapper M > 

<img src= M images/logotypeLeft.png" alt="Rob 1 s Rock 1 n 1 Roll Memorabilia" 
width="394" height="91" id= M logotypeLeft" / > 

<img src= M images/logotypeRight.png" alt= M Rob's Rock 'n' Roll Memorabilia" 
width= n 415" height^"92" id= M logotypeRight n / > 

<div id="introPane"> 


/ou heed -to add a 

"> io thumbhails.js. 

Tha-ts -the Sd\rif>t well be 
m this dhaptev. 


<p>Are you looking for the perfect gift for the rock fan in your life? 

Maybe you want a guitar with some history behind it, or a conversation 
piece for your next big shindig. Look no further! Here you'11 find all 
sorts of great memorabilia from the golden age of rock and roll.</p> 
<p><strong>Click on an image to the left for more details.</strong></p> 

</div> ^ -- --- TW»s 

<div id= n thumbnail Pane n > \w\ 3 ys. 

<img src= M images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
title= M itemGuitar" id= M itemGuitar" / > 

<img src= M images/itemShades.jpg" alt="sunglasses" width= M 301" height= M 88" 
title= M itemShades" id= M itemShades" / > 

<img src= M images/itemCowbell.jpg" alt= M cowbell 
title= M itemCowbell" id="itemCowbell" / > 

<img src= M images/itemHat.jpg" alt="hat n width= 

- /> 


V^olds small 


width="301" height="126 


title= M itemHat" id= M itemHat" 

</div> 

么 _ 

<div id= n de tails Pane'▼> 

<img src= M images/blank-detail.jpg 

<div id= n description"X/div> 
</div> ^ 

</ div> ’ 

</body> Well 

dc*ta»i s 叫办 


300" height="152 n 

<div> is wheve dcbils 
about item should go. 

width="346" height="153 n id= M itemDetail M / > 



</html> 
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It’s time to get the samples and get going. 

Download the examples for the book at 

www. headf irstlabs . com, and find the chap ter 01 

folder. Now open the inventory. html file in a text 
editor, and make the changes shown above. 






















using ajax 






a lot mov-c GSS … 
You (idh see "the ^orhpl^tc 
士心 by dowhloadihg -the 
examples -P\rom the Head 
尸 ’ 浐 s 七 ^c)bs web si 七 


margin : 0 auto 

• • • e t c • • • 


rocknroll.css 
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H^esasWt 

㈣ 咖 oUk sty 

W lz 
^ ^ uSC 

to Yiovk tWrou 命 

RoWs 


height : 700px; 


电 _ h k^k n 1 kiM Vi- 


^ A 


C^l 




；n VS ROCK h：f ' 


甘 i fffU 『DT ■: ri- ptf^tc ： g^l ^ \M fiKK Wfi 

pfeif I *%*" .Jjte pHV ： 1 WTJh HTi« r.V.Dfp 

Piffmfl «!■ gr * <fln*r^l*gri PW 电 _3< 
t 相琴 ■ IrJTK* A^NfrS llvrf >i^yU. "ril |1L l^rfl ^ 

™?najOi j n?n (fif fMrg 釋實 rpqfc r_ 


□ Ld 


lo p .r 4 se^ w flWi aKyfE. 


Oa 


TK'»S is h\t tastad'rn^ 
style Aee 七 ^ r Rob’s 
pay. Wic^ll use *tV^c id 
values ov\ *t^c <dw> 
elements -to style *t^c 
pay, and also la*tcv m 
ouv JavaStv-'i\>*t todc- 


S-tairt out wi-th h o 
■ 心州 de-tail ahd a 

a^a 4v- -the 
心 rh’s dcs^v-ip-tioh 
9° whch 
^cthihjs selected. 


body { 

background : #333; 

font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif; 
margin : 0; 
text-align : center; 


p { font-size : 12px; line-height : 2Opx; } 
a img { border : 0; } 

#wrapper { 

background : #750505 url('../images/bgWrapper.png' 
border : solid #300; 
border-width : 0 15px 15px 15px; 


8px 0 no-repeat 



















window.onload occurs first 


Step 1: Initialize the JavaScript 

We need to create the thumbnails . j s file, and add a JavaScript 
function to set up the initial event handlers for each thumbnail image in 
the inventory. Let’s call that function initPage () , and set it to run 
as soon as the user’s window loads the inventory page. 


T ： ■ *HI IBS ■■■H p l, 

■ HB >■> 琴 H prV |P "■ V!l V ■ 

隊！ 欄 » • , ■: ■ ■ ■ 隱，警 

I I 1 ^ ^ - I I 

m 


The miJPayO fuuiio^ should 

get filed as sooh as the 

^ics 3 || j hc objds on 忪 P 〜. 



i^i-tPajcO sets up -the cmdidk 

bchaviov- (or cadh o-P -the 

•thumb 的 ails m -the mvc^-tx>v-y. 




thumbnails.js 


To set up the oweliek behavior for the thumbnails, 
the iMitPageO function has to do two things: 



Find the thumbnails on the page 

The thumbnails are contained in a div called “thumbnailPane,” so we can find that 
div, and then find each image within it. 



Build the onclick event handler for each thumbnail 

Each item’s full-size image is named with the title of the thumbnail image 
plus “-detail”. For example, the detail image for the thumbnail with the title 
FenderGuitar is FenderGuitar-detail. png. That lets us work out the 
name of the image in our JavaScript. 


The event handler for each thumbnail should set the sre tag for the detail image (the 
one with an id of “itemDetail”）to the detail image (for example, FenderGuitar- 
detail .png). Once you’ve done that, the browser will automatically display the 
new image using the name you supplied. 
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using ajax 



Code Magnets 


The code for the initPage function is all scrambled up on the fridge. Can 
you put back the pieces that fell off? Remember to set an event handler 




image 


thumbs [ 



document.getEleme 

itDetails(this 


ntByldC'ite ： 


iinDetail' 


detailURL ； 



title) 


冰娜 e 


n ^ sB， 






you car\ jet a Yt\tYtr\U 


object 

with 七 


the CVC^-t O^duV-V-cd OY\ 

■the “ 七 his” keyy/ov-d. 


_|_1 藝 ■: : 11111 謂 

七 k y" 
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initPageQ sets up the page 


Code Magnet Solution 


TWis sc*b *m'»-tPayO u\> -to 
loads ?aoyc- 


window.onload = initPage 


function initPage() { 




All *tKcsc W ^c*t-. W -fuy>dtioir>s use 
i\\t VOM b> look uf sometiVir^ 

OY\ Ae )<I+TML pa^c- 




thumbs = document. getElementByld (" thumbnail Pane ") • getElementsByTagName (" img") 








// set the handler for each i mage 

^ ■ 

for (var i =0 ； i<thumbs.length; i++) 


土 mage = thumbs fij ； 


"to do -this oy\tt 
cvciry thumbhail. 


// 


create the onclick function 


JavaS^ ip t | c t you d ^ ihC ^ Uh ^ iohS 
w，thout 9 1V ^9 ^ ah exploit h 


This -Pu^dtio^ is 
\ru^ d 

■thurwlmail imay 
is disked. 


= functi on () 

// find the full-size image 




ri; 碑 5 工 

Ae de-ba»l ^ay s UKU 


detailURL 


， - detail, jpg 


itemDetail").sre = detailURL; 


stDetails(this•title); 





Vo^i -fov-get dll the 
dosmg bv-a^kcb ； ov- youv 
JavaS^vip-t v/oh^-t \ruh. 
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using ajax 



Tesr DriVq 


Create thumbnails.js, add the initPage() function, and 
give the inventory page a whirl. 

Create a file named thumbnails . j s in a text editor. Add the code 
shown on page 18 , and then load inventory. html in your browser, 
ini tPage () should run when the page loads, and you’re ready to try 
out the detail images... 


. 扣 d 釙 imay is disflaycd 



T u hc iic ^ d c ^i s 






tl-o« V，st 

(or RoWs ? a % 
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request objects are browser-specific 

Step 3 : Create a request object 

When users click on an item’s image, we also need to send a request 
to the server asking for that item’s detailed information. But before we 
can send a request, we need to create the request object. 

The bad news is that this is a bit tricky because different browsers 
create request objects in different ways. The good news is that we can 
create a function that handles all the browser-specific bits. 

Go ahead and create a new function in thumbnails . j s called 
createRequest () , and add this code: 




Read'/ codt 6 odc 
：.use- W*b dor^ t 

上 s m 〆 a ⑽伽 



dll 


ov t>wo. 


TKis c'i*t^cv- vc*tuvy\s a 
vce\ucs*t object or w r\ull 
i-f >wo\rkcd- 


k 鄉 9 Baw 

■V 

Cppe 


function createRequest() { _ 

try { h，S，，hC ^ ics a hew 

bu-t it vjo/i wc 

request = new XMLHttpRequest ()°T type. 

} catch (tryMS) { T\\t a^v-oadii bailed, so br^j a^am 

try { 灰 - us'm^ d dJWvA 七 Y? c d 。 j c6 . $ 

request = new ActiveXObject( M Msxml 2 .XMLHTTP"); 


catch (otherMS) 
try { ^ - 


T^a 七 >^ovk 

o^t move 


so 


-bv*7 


request = new ActiveXObj ect("Microsoft.XMLHTTP"); 
catch (failed) { 
request = null; ^ 

the Codt gets hc\rc, hothmg 
wo\rked. Rctuv-h a hull so ihai 
七 he ddllih^ Code will khow *tlicv"C 
v/as a p\roblcrh. 


return request; 



20 


Chapter 1 


thumbnails.js 






















using ajax 

tWeiare nQ o 

Dumb Questi9ns 

Am I supposed to understand all of this? 

No, you’re not. For now, just try to get a general idea of how 
all this looks and the way the pieces fit together. Focus on the big 
picture, and then well start to fill in the gaps in later chapters. 

So what’s an XMLHttpRequest? 

XMLHttpRequest is what most browsers call the 
request object that you can send to the server and get responses 
from without reloading an entire page. 

Well, if that’s an XMLHttpRequest, what’s an 
ActiveXObject? 

An ActiveXObj ect is a Microsoft-specific 
programming object. There are two different versions, and 
different browsers support each. That’s why there are two 
different code blocks, each trying to create a different version of 

ActiveXObj ect. 

And the request object is called XMLHTTP in a Microsoft 
browser? 

That’s the type of the object, but you can call your variable 
anything you’d like; we've been using request. Once you 
have the createRequest () function working, you 
never have to worry about these different types again. Just call 
createRequest () , and then assign the returned value to 
a variable. 

So my users don’t need to be using a specific browser? 

Right. As long as their browsers have JavaScript enabled, 
your users can be running any browser they want. 

What if they don’t have JavaScript enabled? 

Unfortunately, Ajax applications require JavaScript to run. 

So users who have JavaScript disabled aren’t going to be able 
to use your Ajax applications.The good news is that JavaScript is 
usually enabled by default, so anyone who has disabled JavaScript 
probably knows what they’re doing, and could turn JavaScript 
support back on if they wanted to use your Ajax app. 
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lots of ajax is just javascript 

Step 4: fret the item's details 

Once a user clicks on an item in the inventory, we need to send a request 
to the server and ask for the description and details for that item. We’ve 
got a request object, so here is where we can use that. 

And it turns out that no matter what data you need from the server, the 
basic process for making an Ajax request always follows the same pattern: 



(T) Get a request object 

We’ve already done the work here. We just need to call 
createRequest () to get an instance of the request 
object and assign it to a variable. 



thumbnails.js 







SCIrvcir. 




Configure the request object’s properties 


The request object has several properties you’ll need to set. 
You can tell it what URL to connect to, whether to use GET 
or POST, and a lot more... you need to set this all up before 
you make your request to the server. 



You tell youv- v-c«\ucs*t 
object y/iicv-c *to make its 
mtludc dc*ta»ls 
sevvev- y/ill *to 


V*CS^Oir\di> 

■Ha 七七 he vc<\ucs*t should 


be or POST 
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using ajax 


(5) Tell the request object what to do when the 
server responds 

So what happens when the server responds? The browser looks at 
another property of the request object, called onreadystatechange. 
This lets us assign a callback function that should run when the 
server responds to our request. 




Make the request 


The prop 吻 、 value 

should be -the hdme o-P a 
*iUh^*tioh "to Vuh oy\tt "the 
frv C /s Jivch ah dhswe^ 
"to ou 浐 merest. 

t TWis 


servers \rcs\>ov\sc- 


tailed a 
fu^-b'»oy> - 1 七 
yts w tallcd 


Now we’re ready to send the request off to the server and get a response. 



j\st usev t\\cVs an way … 


thumbnails.js 


… "Bia 七 ^lls ^ -Puhd"tioh 
… thurwbhails.'vs... 

c 


..y/W»tK extaits 
By\A toy\-f 'i5uv-cs d 
vc^ucst obje 乙七 … 


^eojues^ 





•”3hd 3 

"to the sc\rvc\r. 





Why do you think the callback function is assigned to a 
property called onreadystatechange? What do you think 
that property name means? 
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send a request 


Lcfs write the code for 
requesting an item's details 


Once we know what our function needs to do, it’s pretty 
easy to write the code. Here’s how the steps map to 
actual JavaScript in thumbnails . j s: 


(T) Get a request object 



The Ohdli^k -Po\r cadh ihVCh-tovy 

alls this -Pu^-tioh 3hd passes ih the elided 
—title aibr^ic, whidh is ihe 
^ry»c o+ the itcru the \rcp\rcsch-ts. 


thumbnails.js 


function getDetails (itemName) { 後 、 t yyt *to b> w^kc 

suv-c *bV^c v-c<\ucs*b object 

request = createRequest (); ⑻，七 ⑽如 七 、^ 

y/c ky\o>w -bV^c^rc >/as a 


Configure the request 

^~r 


iiMageiP s e$cape(i>MageNawe) 



if (request==null) 




f\ro' 


Wcw drea 七 — 如 object. 


alert("Unable to create request"); 
return; 


(5) Set the callback function 


imagelP s escape(imageName) 


var url= 

escape(itemName); 


request 





getDetails•php ? 工 mageID= n + 

cs^apcO takes UYt o( 
dhav-a^tcirs -that 
w'ijh-t be a pvoble “ 
a \rc<\ucst URL s-tvihg. 


request.open( n GET n ,url,true); 


request.onreadystatechange 
request.send(null); 


displayDetails; 


( 4 ) Send the request 


thumbnails.js 



Add the getDetails () function to 
your version of thumbnails . js 
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using ajax 


Always make sure you have a request 
object before working with it 

The first thing getDetails () does is call createRequest () 
to get a request object. But you’ve still got to make sure that object 
was actually created, even though the details of that creation are 
abstracted away in the createRequest () function: 



^icRc^UCsiO irciu^s 
obt^ih ohC- 

re 气 ue 




thumbnails.js 





|,f kv-oY/scv- doesn't suffov*t 

七七 ? R c< \ ucs 七畔也 

⑽滅 c'ucs 七 0 代 a ⑽ 11 . 


And here's how that looks iw 
our code... 


TVis Ime asks (or av\ 

o\)\td av\A assies it -to 
七 variable 


dvcatcRc^ucs-tO vetuv^s a 
null i-f \i a ve«\ues 七 

objedt- So i-f v/C v/md uf m 
brt of CoAt) k”ov/ 

yme y/\ror^. Wicll 

display cvv-ov *to usev 
ay\d c%i*t -fur>t*tior>. 


function getDetails(itemName) 

request = createRequest(); 
if (request==nul1) { 

alert("Unable to create request' 
return 

} 

var url= "getDetails.php?ImageID= M + 
escape(itemName); 
request.open("GET",url,true); 
request.onreadystatechange = displayDetails; 
request.send(null); 




thumbnails.js 

you are here ► 


25 






















request objects are JavaScript objects 


The request object is just m object 

A request object is just a “normal” JavaScript object, and that means you can 
set properties on it and call methods. We can talk to the server by putting 
information in the request object. 


To Do 

0^^od/fy the xhtml 
w/t/al/ze the page 
0^Mate a request object 

O fret the iten»$ details 

D D ^play the deta/l^ 


function getDetails(itemName) { 
request = createRequest(); 
if (request==null) { 

alert ("Unable to create request"); 
return; 

} 

var url= ’ ’getDetails.php?ImageID 
escape(itemName); 
request.open("GET n ,ur1,true); 


request.onreadystatechange 
request.send(null); 


displayDetails^ 



Let's break ope^O down a bit.. 


thumbnails.js 


丁 he opChO method ihi+idli: 
/ ^OhhC^-tioh. 


WcVc still ⑽ 
七 ^ 


ov\ 
dc*ta*»U 




TKis I'mc tells i\\t vc<\ucst object 
URL bo tall. Wic sc^d alor^ 知 

so sewev- 

km>y/s v/iiidii details bo stv\A- 


These pa\ra^ctcv-s tdl the 

objc^ how wc waht \i 
"to ^OhhCdt to the sc\rvc\r. 



与 BT" ihdi^'tcs liow "to 
schd -the data (the othev- 
optioh is TOSD. 



TW\s is -tV^c uv-l (or scv-vcv- 
side strip 七 *t^a*t v/'»H respond *to 
{\\t request 


thereicire no ^ 

Dumb Questi9ns 


true); I j 


Are there other properties of the request object? 

Sure. You’ve already seen onreadystatechange, and when you need to 
send XML or more complicated data to the server, then there are several others you'll use. 
For now, though, we just need the open () method and onreadystatechange. 


丁 his "tha 七 "the should 

be asyh^h\rohous. That is, the CoAt 
•m the b\rowsc\r should dohtmuc io 
execute while its waiiih^ -fov- the 
sc\rvc\r -to \rcspohd- 
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using ajax 


Hey, server... will you call me back at 
displayPetailsd please? 


The properties of the request object tell the server what to do when it receives the 
request. One of the most important is the onreadystatechange property, which 
we’re setting to the name of a function. This function, referred to as a callback, tells 
the browser what code to call when the server sends back information. 


i\\t sevvev. 


The scirvcir ^-Uhs 

卞， p ， 州 

^d\taitd by ^ 


s Uf{L. 


was 



thumbnails.js 


But whch "the scv-vcv- 
\rCspohds, the b\roy/sc\r 
alls displayDc-tailsO, 
y^oi ^ciDeiailsO. 


Web Server 


TKc scv-vcv- responds 
data -for v-c<\ucst. 


TK'»s is *tV^c Imc 
-tV^a-t -bells i\\t 
bvov/sev* 七 Code 
{p tall {\\t 
sewev vcs^oy\ds *to 
{\\t v-c<\ucs*t- 


function getDetails(itemName) { 
request = createRequest(); 
if (request==null) { 

alert ("Unable to create request") 
return; 

} 

var url= ’ ’getDetails•php? 工 mageID= n 
escape(itemName); 
request.open("GET",url,true); 


+ 



function 
getDetails 



request.onreadystatechange = displayDetails; 


request.send(null); 


thum|)h|ls.js 

This is 3 \re-Pe\reh(^e "fco a 
-Puhdtioh, Y)oi a Tuhdtioh 
dalI. So 你 ake su\rg you doh ’ 七 
i^ludc clhV pol\rCh-thcscs a-t 
the tv\d c\ the -fuhdti 


；iOh 


you are here 





























send() your request to the server 


Use sendH to send your request 


All that’s left to do is actually send the request, and that’s easy... just use the 
send () method on the request object. 


YouVc scv>d'm5 
VC<YACS*t hevc.. 


t 


function getDetails(itemName) { 
request = createRequest(); 
if (request==null) { 

alert("Unable to create request"); 
return; 

} 

var url= ’ 'getDetails•php? 工 mageID= n + 
escape(itemName); 
request.open("GET",url,true); 
request.onreadystatechange = displayDetails; 


request.send(null) 




… and this youVc hot sehdih^ 

any cx-tv-a dd'td wi-th -the v-c^ucs-t. 


I getDetails I 

LJ 

thumbnails.js 



Aren*t you forgetting something? 
We don't want to send null; we 
want to send the item name. 


You can send data in your URL string. 

The request object allows us to send all kinds of data in 
a variety of ways. In getDetails (), the item name is 
part of the URL string: 

var url= ’ ’getDetails•php? 工 mageID= n + 
escape(itemName); 

Since that’s part of the URL sent to the server, we don’t 
need to send anything else to the server in the send () 
method. Instead, we just pass null... which means 
“nothing.” 


Asynckronous 
apps make 
requests using 
a JavaScript 
object，not a 
lorm sulmiit* 
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using ajax 




The server-side code is... 

...on the server. 

That sounds obvious, but lots of times, you 
don’t have to (or even get to) write the code 
your web application is talking to. Instead, 
you work with an existing program, where 
you know the inputs and outputs, or tell 
another group what you need. 


Not only that, but you might also have one 
server-side program that’s written in PHP, 
and another in ASP.NET... and other than 
the URL, you don’t have to change your 
JavaScript code at all. Take a look: 


object- 


thumbnails.js 


f\\\ vou \rcall7 *to akou-t 

仏 c scvvcir »s a^d 

vouv s 忧 ds a”d 

yts +V-OW\ *tv^c SCV-VCV-. 


Evcr\ i-P 七 his pairt o( -thmjs is you\r 
v-cspo^sibili-ty, its -to-tally sepav-ate 
-rv-om youv- 乂 -Pv-o^-t-c^d Code- 



Web Server 
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servers return just what you need 


The server usually returns data to Ajax requests 

In a traditional web app, the server always responds to a request from the browser by 
sending back a new page. The browser throws away anything that’s already displayed 
(including any fields the user has filled in) when that new page arrives. 


Traditional server-side interactions 



丁 he b\rowsc\r sei^ds a 
■to a u\rl, possibly sehdih^ 
some \rc^ucst data. 





some xcx 
卜七 it always vetuv-hs a 
•M web page. 


Web Server 


Ajax server - side interactions 

In an Ajax app, the server can return a whole page, part of a page, or 
just some information that will be formatted and displayed on a web 
page. The browser only does what your JavaScript tells it to do. 


T\\c scv-vcv alv^ays 
docs sowc 

a^d sends katk 咕 … 

sometimes HTML, 
sowct^cs jus*t 

m*fovwa*bioy\. 



funct 


IV 


getPetailsO 





getPctails.php 


displayPetailsO 
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0u\r Jav^S^irip-t (iah 

:允 the sc^rvcvs dais 

u P d ^ just ^ 

the page. 
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rec^uest 



Web Server 


丁 sc\rvcv vcsfov\ds, a^d 

七 he Wov/scv- v-uirvs youv 

tallkadk 七’曝 

































using ajax 


Ajax is server - ag wostic 


Ajax doesn’t require any particular server technology. You can use 
Active Server Pages (ASP), PHP, or whatever you need and have 
access to. In fact, there’s no need to get into the details of the server- 
side technology because it doesn’t change how you build your 
Ajax apps. 

Here’s all that Ajax really sees: 


Tkis is kow 



TWis \s ‘11 send 
•bo i\\t sevvev. 


parameters 


response 


丁 his is "the scv-vcv- 
-fco schd 



Ajax sees 

server-side 

interactions. 


^^arpen your pencil 


What parameter and response do we need for the interaction 
with the server for Rob’s memorabilia page? 


► i^iswers on pa^e 40. 
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31 




















test drive 




Tesr DriVq 


Code getDetails(), and fire up your web browser. 

Make sure you’ve got getDetails () coded in your 
thumbnails . j s file. Load up Rob’s memorabilia page, and try 
clicking on one of the inventory images. 


n n n 


-：■=■=> H flit Vftncr 叫 _ 


fl LTa =-1. £crn.'»EKLu mM djM >^HDI |.. - ¥¥^prr W 






What happens? What’s wrong with the page? 
What do you need to do to fix the problem? 
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using ajax 






■f 


起 > 去 


Below on the left are several properties of the request object. Gan you 
match each property to what it does, or what information it contains? 


readyState 


status 


responseXML 


stfttusText 


responseText 


The status code message returned 
by the server, for example, “OK” for 
status 202. 

Contains information sent back 
by the server in XML format. 

A status code returned by the server 
indicating, for example, success or that 
a requested resource is missing. 

Contains textual information 
sent back by the server. 

A number that represents the 
current state of the request object. 


Can you explain what a callback 
function is again? 

A callback function is a function that 
is executed when something else finishes. 
In Ajax, it’s the function that’s called when 
the server responds to a request object. 
The browser “calls back” that function at a 
certain time. 



So a callback executes when the 
server’s finished with a request? 

No, it’s actually called by the browser 
every time the server responds to the 
request, even if the server’s not totally 
done with the request. Most servers 
respond more than once to say that they’ve 
received the request, that they’re working 
on the request, and then, again, when 
they've finished processing the request. 


Is that why the request property is 
called onreadystatechange? 

That’s exactly right. Every time the 
server responds to a request, it sets the 
readyState property of the request 
object to a different value. So well need to 
pay close attention to that property to figure 
out exactly when the server’s done with the 
request we send it. 
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request object properties 


% + 


Below on the left are several properties of the request object. Your job was 
to match each property to what it does, or what information it contains. 


This oy\c *mdida*tcs ihai a request 
is -Pmishcd ； a 灼 d i*t’s now okay *to 



七 wt (and 灼。七 


The status code message returned 
by the server, for example, “OK” for\ 
status 202. ) 

s "t^tus ahd 
statusTcx-t 
di-PWht vcv-siohs c^P 
"the same ih-Po\rma-tioh. 

Contains information sent back 

by the server in XML format. | 


A status code returned by the 
server indicating, for example, 
success or that a requested 
resource is missing. 

Contains textual information 
sent back by the server. 


A number that represents the 
current state of the request object. 
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using ajax 


Use a callback function to work with 
data the server returns 

How do we show the textual description for each item? Let’s assume the 
server will send the details about an item as pre-formatted text in the 
response Text property of the request object. So we just need to get 
that data and display it. 

Our callback function, displayDetails () ， needs to find the 
XHTML element that will contain the detail information, and then set its 
innerHTML property to the value returned by the server. 


To Do 


Mod/'fy the xmtml 
W/t/'a|/ze the page 
Creafe a request object 

Bf 敁亡亡 he /㈣ 她氾 

一 D ^Pl3y the details 



Tk scirvcir IrctuVhS the devils 
… 七 he \rcspohsc7cx-t pv-opev-ty 
J the irc<\ucs-t object. 


request 1 



\ 


respowsetext 



thumbnails.js 

0\^ ^dllbd^k USC 





e no ^ 

Questions 


So the server calls displayDetails() when it’s finished with the request? 

No, the browser actually does that. All the server does is update the readys tate property of the request 
object. Every time that property changes, the browser calls the function named in the onreadystatechange 
property. Don’t worry, though, we'll talk about this in a lot more detail in the next chapter. 
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responseText stores the server’s response 

fret the server's response from the 
request object's respowscTcxt property 

The data we want is in the request object. Now we just need to get that 
data and use it. Here’s what we need: 


Its oka 7 ^ all oj 
tW»s 

tlcav 7 OVA ' ^ , 
look at 代 _ slate 
a^d status todes m 
a lot wvovc dc-ta'*' ^ 


This Ime gets a rt(crtY\tt *to 
七 he )<ttTML element well 
pu 七 -the i*tcm derails m. 


function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

detailDiv = document•getElementByld (’ ▼description ”）； 
detailDiv.innerHTML = request.responseText; 

} This Ime puts the 刈 T 亂代 Wd 5 

} by the s^rvc\r that eUcht 





D 


thereicire no 

)umb Qi] 


thumbnails.js 


Questi9ns 


What’s that readyState property? 

That’s a number that indicates where 
the server is in its processing. 0 is the initial 
value, and when the server’s completed a 
request, it’s 4. 


So that first statement just checks 
to see if the server’s finished with the 


request? 


A ： 


You got it. 


Why do we have to check that 
every time? 


Because the browser will run your 
callback every time the ready state changes. 
Since a server might set this value to 1 when 


it receives the request, and to 2 or 3 as it’s 
processing your request, you can’t be sure 
the server’s done unless readyState 
is equal to 4. 

And the status property? 

That’s the HTTP status code, like 404 
for forbidden, and 200 for okay. You want 
to make sure it’s 200 before doing anything 
with your request object. 

Why would the server set the 
ready state to 4 when the status code is 
something like 404? 

Good question. Well talk about that in 
the next chapter, but can you think of how a 
request could be complete and still have a 
status code that indicates a problem? 


Isn’t innerHTML a bad thing to use? 

It is, but sometimes it’s also very 
effective. Well look at better ways to change 
a page when we get more into the DOM in 
later chapters. For now, though, it works, 
and that’s the most important thing. 

Am I supposed to be getting all 
this? There’s sure a lot going on in that 
callback function... 

For now, just make sure you know 
that the callback is where you can use the 
server’s response. We’ll talk about callbacks, 
ready states, and status codes a lot more in 
Chapter 2. 
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using ajax 




Tqst DriVQ 


Code your callback, and test out the inventory page. 

Add displayDetails () to your thumbnails . j s file. You should also make 
sure that the server-side program with the inputs and outputs detailed on page 30 
is running, and that the URL in your getDetails () method is pointing to that 
program. Then fire up the inventory page and click on an item. 




W\\tY\ you dlidk oy\ By\ you 

should see both a lav^cv- 

o( -the BY\d details about 
it. all wrthou*t a vcload. 


1 ■- s 




om N ROCK，V ROIL 〜彳霞 ㈣ l\ 


Jka nk m r ins raja ar* i 

■也 mm： 

綱 i w ■ fv^vi Eg 
d " #| ^jpa ra 1 pa. k , su ■■ m a 1 

w+x mt 




1 r- 


PfiVS ROCK N ⑽ L _ 1 : ^ 


Jiv a . i — ii| bb la^wi f# la --i 
•mjm I t jminan ■ , ■ 

E+-HB E. ■ WJUI 

** »■ *■ ■fiLHIwr nr shI %dl. 


1 


Confused about getting your 
server-side program working? 


Flip to Appendix I for some help on 
getting things working on the server. 
There are also some helpful server-side resources for the 
book online at http : / / www. headfirst labs • com 


■oar iv ^Jfi a mqih• *.k 


frr ■ TaH-dl'n ira _ ^.ukA : .I'~k 1« ^ir hv 
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ajax apps are peppy 


Goodbye traditional web apps. 


Rob’s page is working more smoothly now，customers are coming 
back in droves, and you’ve helped pair vintage leather with the 
next-generation web. 

Rot’s old，traditional wet app ： 

o ...reloaded the entire page 
when a user clicked on an 
item’s thumbnail image. 

...took a long time to load 
because the entire page 
had to be rendered by the 
browser on every click. 

...felt unresponsive because 
the user had to wait on all 
those page refreshes. 

...lost Rob business, annoyed 
his customers, and drained 
his bank account. 





olr 仏 ioh. S … 〜“咖 


Roll’s new，Ajax app ： 




o 


...only changed the part of 
the page that needed to 
be updated. 

...lets users keep viewing 
the page while images 
and descriptions are 
loaded behind the scenes, 
asynchronously. 

...reduced the need for his 
users to have super-fast 
connections to use his site. 


Cow\>avc bed 如 

|0 … 如 7 should looK 

Amazing work... IVe 
already got some ideas 
for our next project. 


0 
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using ajax 



iljaxAcrostic 

Take some time to sit back and give your right brain something to do. Answer 
the questions in the top, then use the letters to fill in the secret message. 


This is the language you use to script Ajax pages. 


1 23456789 10 

This type of function gets called when a process completes. 


11 12 13 14 15 16 17 18 

This request object property tells us when the server has finished processing. 


19 20 21 22 23 24 25 26 27 28 

If something goes wrong at the server, this property will tell us what. 


29 30 31 32 33 34 

The browser will put text that the server returns in this property. 


35 36 37 38 39 40 41 42 43 44 45 46 

If there’s a problem, we can get a description of it in this property. 

Use ^ f C - 

bUks above -to … 47 48 49 50 51 52 53 54 55 56 


49 1 31 45 13 54 10 29 23 39 33 


15 51 8 14 22 19 28 37 9 39 40 34 8 3 44 

31 9 38~~14 8 6 26 46 8 39 40 24~ 
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ajax is server-agnostic 


^jarpen your pencil 

Solution 


from page 31 


What parameter and response do we need to implement Rob’s 
page? 


sehd the scvvcir the hdme 
the item, wh'uih is showed 

士十 title attnbutc ihat 

item s image ih the XHT/VIL. 


r^\ 

f request f 





•rtem details 


dc s^bcs 、 W. 


t 
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using ajax 



iljaxAcrostic Solution 

Take some time to sit back and give your right brain something to do. Answer 
the questions in the top, then use the letters to fill in the secret message. 


This is the language you use to script Ajax pages. 

J A \/ A S C R I P T 

~ 2 3 4 5 6 7 8 9 10~" 

This type of function get called when a process completes. 

C A L L B A C ^ 

Tl 12 13 14 15 16 17 iF" 

This request object property tells us when the server has finished processing. 

J__A_T_ 

"7i 20 21 22 23 24 25 26 27 28~ 

If something goes wrong at the server, this property will tell us what. 

S T A T U S 

"^9 30 31 32 33 34~ 

The browser will put text that the server returns in this property. 

R E S P 0 N S E T E >< T 

~35 36 37 38 39 40 41 42 43 44 45 46 

If there’s a problem, we can get a description of it in this property. 

S T_A_T_U__S_ 丁 E ) (丁 

~47~~48 49 50 51 52 53 54 55 56~ 


A J A >< LETS i 0 \A 

49 1 31 45~~ 13 54 10 29~ ~23 39 33~ 

BulLD RESPONSIVE 

15 51 8 14 22~ 19 28 37 9 39 40 34 8 3 44 

APPLICATIONS 

31 9 38~~14 8 6 26 46 8 39 40 24 ~ 
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Thinking Ajaxian 


Doing two things at 
once with Ajax... gosh, ifs 
the best! But I must admit, I 
have to think about things in a 
whole new way... J 


Welcome to Ajax apps — it’s a whole new web world. 

So you’ve built your first Ajax app, and you’re already thinking about how to 
change all your web apps to make requests asynchronously. But that’s not all 
there is to Ajax programming. You’ve got to think about your applications 
differently. Just because you’re making asynchronous requests, doesn’t mean 
your application is user-friendly. It’s up to you to help your users avoid making 
mistakes, and that means rethinking your entire application’s design. 


this is a new chapter 
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web app in need of ajax makeover 


Mike's traditional web site 




f °Vu 0 " WC USC a lcss 。沁— 

二 ' hh ° yS ^ 


Mike’s got the hippest movie reviews going, and he’s taking his popular 
opinions online. Unfortunately, he’s having problems with his registration 
page. Users visit his site, select a username, type in a few other details, and 
submit their information to get access to the review site. 


The problem is that if the username’s taken, the server responds with the 
initial page again, an error message... and none of the information the user 
already entered. Worse, users are annoyed that after waiting for a new page, 
they get nothing back but an error message. They want movie reviews! 






MIhi i 








C- 







- 


Was W 

resows- but 

A 
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Ki0h"t how -the usev* 
-fills out -the avui 
^li^ks -the w Rcgis-tcv- w 
bu*t*toh... 3hd thch 
3hd hopes -fov- 

thc best 


m 9 e ^i n 9 

, of registrations, so lots of 

usernames are already taken. This is 
how everyone else handles signups, but 
rm getting flooded with complaints. 

义 Can you help me out? . 




















designing ajax applications 




ExeftciSe 


Mike’s got real problems, but with one Ajax app under your belt, you should probably have some 
ideas about what Mike needs. Take a look at the diagram of what happens with Mike’s app now, 
and make notes about what you think should happen. Then, answer the questions at the bottom 
of the page about what you’d do to help Mike out. 


O A 


new user fills out the registration form 




The form is submitted to a web server 



Web Server 



❺ A server-side program verifies and 

vnlidntes the reoistrntion informntion 




...and returns a new web page to the 
users web browser 


Tiic scwcv- displays a 


Welcome sdvee^ .. 



or 




-ov- it v-c-di 
the 

message. 


Jisplays 

with 


t 叫 M 恤义 
Jf\clds all 


What do you think is the single biggest problem with Mike’s site? 


What would you do to improve Mike’s site? 
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asynchronous requests 


Lcfs use Ajax to send registration 
requests ASYNCHRONOUSLY 


Ajax is exactly the tool you need to solve the problem with Mike’s page. Right 
now the biggest problem is that users have to wait for a full page refresh < 
to find out their requested username is already taken. Even worse, if they 
need to select a different username, they’ve got to re-type all their other 
information again. We can fix both of those problems using Ajax. 


p'ld you y/vrte dovm 

si^»U *to *tK»s as 

Mike's bluest fvoblcw? 


We’ll still need to talk to the server to find out whether a username has been 
taken, but why wait until users finish filling out the entire form? As soon < 
as they enter a username, we can send an asynchronous request to the 
server, check the username, and report any problems directly on the page — 
all without any page reloads, and without losing the user’s other details. 


okay i-f y ou dld ^ 
tUk abou-t s Ch di h9 ihc 
^ucsi as sooh as -the usev 

七 ypes m USClfharhC... 

^edii y ou jjj/ 


but b' 


ohus 


Po-tc^-tial ^ o-f Mike’s 


ov\ 




Ime v-cv'icv/ s*i*tc 


JavaScript 


The scirvcir ou ^. 

“Ilbaek -Puh^tioh 
khow i-p 

is 

olr oksy io usc . 


Lets dhcdk -the vc^ucs*tcd 
uscirhamc as sooh as -the us C \r 
leaves ^\A 


you alv-cadY k^ov/ Kov/ 
•to sey^d 

rc^Atsi *tV^c server. 


TV^ iascv" *f *11 ° u， t 

-form y/W»lc i\\t strMtr 

is i\\t usc\nr\amc. 


丁 k daWbatk df la 7 s 

如 cvvov ^ 一 
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designing ajax applications 


All this just so some movie buff doesn’t have 
to retype their name and email address? 
Doesn’t this seem like a bit of overkill? 


Don’t annoy your users... ever! 

On the Internet, your competitors are only a 
click away. If you don’t tell your users about a 
problem right away, or if you ever make them 
re-do something, you’re probably going to lose 
them forever. 

Mike’s site may not be a big moneymaker (yet), or 
even seem that important to you... but it might to 
his fans. One day a user you’re helping him not 
annoy may land him a six-figure income writing 
movie reviews for the New York Times. But Mike 
won’t ever know if his site is hacking his users off. 
That’s where your Ajax skills can help. 


0 



Aja% d——— 




Don't atmoy jouv users 

k If there’s a problem with 


/ If there’s a problem wii 

I your web app, let your users 

\ m W know about it as quickly 

and clearly as possible. And 
you should never throw away 
anything the user has already done, even 
if something happened that they (or you) 
weren’t expecting. 


tWeiare no o 

Dumb Questi9ns 

That design principle isn’t really Ajax- 
specific, is it? 

Nope, it applies to all web applications, 

... in fact, to all types of applications. But with 
Ajax apps, especially asynchronous requests, 
lots of things can go wrong. Part of your job 
as a good Ajax programmer is to protect your 
users from all those things, or at least let them 
know what’s going on if and when they do 
happen. 
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plan mike’s app 




It’s time to get to work on Mike’s site. Below are 5 steps that you’ll need to execute to get 
his site working, but the details about each step are missing, and the ordering is a mess. 
Put the steps in order, and write a sentence or two about exactly what should happen on 
each step. 


Q~ Create and configure a new request object 
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designing ajax applications 


After you’ve got your steps in order, take a look at the two diagrams below that describe 
some of the interactions in an Ajax version of Mike’s app. See if you can fill in the blanks so 
that the diagrams are complete and the annotations are accurate. 


The — 

匕 311 "to 


- cvcht tv-iggev-s 

ouV" JclvaS^irip-t. 



a 


TV^c JavaSoft 七咖 ext^ a^d 
i\st _ 

一、 


The \rc«\ucst object tells 

"the ― what — 

the usc\r 乙 hose 






The_ _ 

o\r -failu\rc without 


“hAoh updates the page io show sutess 


show S 

i 匕 Ohid -to 

9 ,v « the usev some 
visual -feedback. 


validation.js 


TV>e_vc*tu\nr\s a value 

y/hc*t^cv- _has bccv>_ 
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asynchrony can reduce annoyances 



Your job was to order the steps to build an Ajax-version of Mike’s movie review site, and fill in the 
missing descriptions of each step. You also should have filled in the missing words in the diagrams. 


o 


❺ 


❺ 


o 


Update the registration page’s XHTML and CSS 

We’ll need to add <script> elements to the registration form to 
reference the JavaScript code we’ll be writing. 

Set up event handlers for the web form’s fields 

We’ll need some initiational code to set up an onblur event for the 
username field on the page. So when the user leaves that field, we’ll 
start the request process. 

Create and configure a new request object 

We can use the same create Re qu est () function from Chapter 1 to 
create the request, and then we’ll add the user’s requested username to 
the URL string to get that over to the server. 

Verify the requested username 

Once we’ve created a request object, we need to send it off to the 
server to make sure that the requested username hasn’t been taken 
by someone else. We can do this asynchronously, so the user can keep 
filling in the page while the server’s checking on their username. 

cvch-t 七叫 … “all 
一 to ouir JavaS^ipi 




y ou ^ 

匕 ode+oir these s-teps i h ^hy 

but this is -the flow 

that the app will 4llow and 

tnat wc II use -fco update 
s a ?? i h -this 


We skiwwcd *bW»s 

•m 七 ^ last but 

y,cII look a*t detail 

m 七 Wis 




TV^c JavaW? 七 WW scales and 


validation.js 


The \rc<\ucst object tell 
the. _se\rve\r 


_USg\fh 3 l^g "the USCV" d-Kosc* 



❺ Report any problems with the requested username 

When the request object returns, the callback function can update the 
page to show whether the username check succeeded or failed. 

I h f updates the page to show su^css ov 


心 ilu 代 without losm 3 ahy 七 he uWs 



validation.js 



TKc sewev v-c*tuv*ir>s ^vaIu^rTd>d3*tm5 
y/hc*tKcv- uscvr^mc has been 













































designing ajax applications 


Update the registration page 

The basic structure of Mike’s registration page is already in 
place, so let’s go ahead and add a <script> tag to load 
the JavaScript we’ll write. Then, we can set up the username 
field on the web form to call a JavaScript function to make a 
request to the server. 



Use an opening and 
closing <script> tag. 


Well it! 


Some browsers will error 
out if you use a self¬ 
closing <script> tag, like 〈 script/>■ 
Always use separate opening and 
closing tags for <script>. 


<head> 


<title>Mike's Movies</title> 

<link href= M movies.css" rel="stylesheet" type="text/css" / > 

<script src="scripts/validation•js" type="text/javascript"X/script> 


</head> 


Oust like m ilie last well 

validation \s as y/c 50 乩矸七饮 . 







Download the registration page’s XHTML and CSS. 

If you haven’t already done so, download the sample files for 
the chapter from www. headf irstlabs . com. Look in the 
Ghapter2 folder for the file named registration. html, 
and then add the script tag shown in bold. 


registration.html 



these 

ih 

^rcgisiira-tioh. 

Alikc^s 

^rcgis-tira-tioh pay. 


tWei^re no ^ 

Dumb Questions 


What’s the big deal? This is all 
just like the rock and roll site from last 
chapter, isn’t it? 

So far, it is. But most Ajax apps start 
with a few 〈 script 〉 tags and some 
external JavaScript files. 


But we’re still just sending a 
request and getting a response, right? 

Sure. In fact, almost all Ajax apps can 
be described that simply. But as you’ll see 
as we get into the registration page, there 
are actually two interactions possible: the 
one we’re building to check a username, and 
the Submit button the user will press when 
they’ve filled out the form. 


What’s the big deal about that? 


What do you think? Can you see any 
problems with having two ways of making 
two different requests to a web server? 
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separate content from presentation from behavior 




Hey, there's more to do in that XHTML 
What about the onblur event handler on the 
username field? We want to run some code every 
time the user enters a username, right? 


Separate your page’s content from its behavior. 

We could call the JavaScript directly from the XHTML by，for 
example, putting an onblur event in the username form field. 
But that’s mixing the content of our page with its behavior. 

The XHTML describes the content and structure of the 
page: what data is on the page, like the user’s name and a 
description of the movie review site, and how it’s organized. But 
how a page reacts to the user doing something is that page’s 
behavior. That’s usually where your JavaScript comes in. And 
the CSS defines the presentation of your page: how it looks. 

Keeping content, behavior, and presentation separate is a good 
idea, even when you’re building a relatively simple page all by 
yourself. And when you’re working on complex applications 
that involve a lot of people, it’s one of the best ways to avoid 
accidentally messing up somebody else’s work. 


,Separate your page's 
(ooojjmt ， b^iaviot, 

mW mi 

Whenever possible, try to keep 
your page’s content (the XHTML) 
separate from its behavior (JavaScript 
and event handlers) and its presentation 
(the CSS look-and-feel). Your sites will be 
more flexible and easier to maintain and 
update. 



How do you think separating 
the content of a site from its 
presentation and behavior makes 
it easier to change? 

You’ll V^cav some fco^lc 
^ bo tW»s 卜 6 一 as 
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Evciftt Kandilevs 

This week’s interview: 

Where are you really from? 


designing ajax applications 


Head First: Well, not really... isn’t that a later 


Head First ： It’s good to have you with us, Event 
Handler. We’ve got some really interesting questions 
for you this week. 

Event Handler ： Really? I’m always eager to 
respond to questions. 

Head First ： Actually, there’s this one question that 
everyone’s been asking. Where exactly are you from? 

Event Handler ： Well, I hail from the land of 
EGMA, which was — 

Head First: Oh, no, I mean, where are you called 
from? 

Event Handler: Hmm... Well, I think the EGMA 
folks might want their story told, but if you insist... 

I usually get called from an XHTML form field or 
a button, things like that. Sometimes from windows, 
too. 

Head First ： So you’re called from XHTML pages? 

Event Handler ： Most of the time, that’s right. 

Head First ： That’s what I thought. Well, that settles 
the dispute. You all heard it here first — 

Event Handler ： Wait, wait! What dispute? 

Head First: Well, we had JavaScript calling in, 
swearing he could call you. Something about 
behavior calling behavior... it was really just 
nonsense. 

Event Handler ： Oh, you must be talking about 
assigning me programmatically. Very smart, that 
JavaScript... 

Head First ： Programmatically? What does that 
mean? 

Event Handler ： You see, I’m really just a property 
at heart — 


chapter? 

Event Handler ： Never mind. Look, everything on 
a web page is just an object. Like fields and buttons, 
they’re just objects with properties. 

Head First ： Okay, sure, we’ve met some fields 
before. Nice folks. But Button, he never would return 
our calls... 

Event Handler ： Well, anyway, events like onblur 
or onload are tied to me through those properties. 

Head First ： You mean, like in XHTML when you 
say onblur= M checkUsername () ’▼ on an input 
element? 

Event Handler ： Exactly! It’s just a property of 
the input field. You’re just telling the browser what 
function to run... you know, how to handle that 
event. 

Head First: I’m totally lost... 

Event Handler ： Well, you can use JavaScript to 
assign a value to a property of an object, right? 

Head First ： So you’re saying that you don’t have to 
just assign event handlers from an XHTML page? 

Event Handler ： Right! You can do it directly 
in JavaScript code... and keep your content and 
structure separate from your behavior. 

Head First ： Well, this is quite surprising. But how 
do you get your JavaScript to run in the first place to 
assign an event handler? 

Event Handler ： Well, that’s the trick. Any ideas? 
Head First ： I’m not sure. Let’s ask our audience... 

How can you get an initial piece of JavaScript to run 
without referencing a function in your XHTML page? 


Head First ： Uh oh, is this more about EGMA? 

Event Handler ： — that can be set with JavaScript. 
No, now listen. You know about the DOM, right? 
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onload happens first 


Set the window.oMload event handler 
PROGRAMMATICALLY 

We want some JavaScript code to run when the registration 
page loads, and that means attaching that code as the event 
handler on one of the first page events, window. onload. 


And we can do that programmatically by setting the onload 
property of the window object. But how do we do that? Let’s 
look at exactly what happens when the registration page is 
requested by a user visiting Mike’s movie review site: 


First, a user points their browser at Mike’s registration page. 



registration.html 


Then, the browser starts parsing the page, asking for 
other files as they Ye referenced. 





ih ^ XWT/VJL... 



registration.html 


validation.js 
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the scv-vcv- se^ds 
the v-c«\ucs-tcd -files 
(m ovdev* it w 扣 *ts). 
































designing ajax applications 


If the file is a script，the browser parses the script，creates 
objects, and executes any statements not in a function. 


I Wmdo>N Olr\loddl- ^ 
mi-tPa^C ； 
luvllicsdcv 二 •… 


Some slaWe”*b wul 七 
objct*b kem^ treated. 



Evcmythmg oh the )(HTML 

like olh is 

代 pcschtcd by 如 objat 


validation.js 


Othcv- staterwe^ts 一 
set pv-opc\rtics ov\ 
those objects. 



Fuhd-fciohS av-c 
dc-Pmed as well. 
S*t3-tcr»»Ch"ts ih 




丁 V^e onload 

W\Y\do^ obje 此 
\s set 


c 


-Puhd-tiohS av*Ch ； -t 

V"Uh Uh-til -the 

-Puhdtioh is called. 


丁 hese assiQhmeh-ts avc 
ou^ide^o-r 3hy -fuh^-tioh, 
so theyve \ruh whch "the 
JavaS^vip-t is -fiirs-t pav-sed. 


Finally, after all referenced files are loaded and parsed, the 

browser triggers the window.onload event and calls any 

function that’s registered to handle that event. r 二宽 


py.. 



i\\t fay has \>ttr\ 

Axs^td 灼多 . 



… s 。*thc blroy/sev" 

奶 ohload. 



validation.js 


you are here ► 


55 


















initialize mike r s registration page 


Code m your JavaScript outside of 
fuwctiows ruws whew the script is read 

We want to set an event handler up to run as soon as a user loads the 
registration page. So we need to assign a function to the onload 
property of the window object. 



And to make sure this event handler is assigned as soon as the page 
loads, we just put the assignment code outside of any functions in 
validation . j s. That way, before users can do anything on the 
page, the assignment happens. 


TW,S 6ode a ，二 s 

as soov. as yrcad by 

i\st Woy/scv. 

window.onload : 

This tdls 一 

"the bvowsev 


丁 his I me tells -the b\rowsc\r -fco dal I the 
•mitRay -Puh^-tioh as sooh as -the elemeh-ts 
"the page have bcc^ loaded- 


initPage; 



"to ddll ihc 
^hcdkUscv-hoirhcO 

the usc\r leaves 
the uscv-harwc 
-field Oh the -Po\rrw 


TV^'is \s 

-fuy\C.*bioy\ 七 h 七 
y/iII £.vc3*bc 
dv\d scy\d 七 he 
vc'ucs 七 object 
We'll Wild 七 Wis 
a \\ii\t la*tcv. 


function initPage(){ 

document.getElementByld( M username M ).onblur 
checkUsername; 

} Hc\rVs a^othev- dase v/hcv-c 

wcVc assi^mj 
ha^dlcv- pv-ojvarwmatidally. 


function checkUsername() { 

// get a request object and send 
// it to the server 


Wc'II look at 州忧七 BylD m 

Atia\\ m C^ap-tcv-s ^ a^d ^>- Fov 

you or^ly v\ttd *to u^dev-s-ta^d rt 
vc*tuv^s ^(ttT/^|L- 

pay W\{M spcti-f icd id- 


function showUsernameStatus() { 


^ - ^ TW«s Will update 

a-f*tcv \)nt bvov/sev a 

// update the page to show whether y- cs ^o^sc -fvow *bV\c sewev- 

// the user name is okay 



Create the initial version of validation.js. 

Create a new file called validation. j s in a text 
editor, and add the function declarations shown above. 
Remember to assign the initPage () function to the 
window object’s onload property! 
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designing ajax applications 


What happens whew... 

There’s a lot going on in this step. Let’s go through it to make 
sure everything’s happening exactly when we want it to. 


First … 

When the browser loads the XHTML 
file, the 〈 script〉tag tells it to load a 
JavaScript file. Any code that’s outside of a 
function in that script file will be executed 
immediately, and the browser’s JavaScript 
interpreter will create the functions, 
although the code inside those functions 
won’t run yet. 



<s 6 rip 七 svd 
<sdrip 七 svd 
</Kcad> 


validation.js 


registration.html 


and tken 參 《« 

The window. onload statement isn’t in a 
function, so it will be executed as soon as the 
browser loads the validation . j s script file. 




The window. onload statement assigns the 
ini tPage () function as an event handler. That 
function will be called as soon as all the files the 
XHTML refers to have been loaded but before 
users can use the web page. 



Evert tiicsc haff ⑼ m sc^cUc, 

J\LL o-f 七 iVis oU\ays bc-fovc usevs cav\ 
•m 七 y/rth 七 v^b pay. 


… and iinally 


### 


The in it Page () function runs. It finds 
the field with an id of “username.” Then, it 
assigns the checkUsername () function to 
the onblur event of that field. 


This is the same as putting 
onblur= n checkUsername () " in the 
XHTML. But our way is cleaner because it 
separates the code (the JavaScript function) 
from the structure and content (the XHTML). 



WmdowoJoad 

-to tall mVtPa〆) 
讪⑼ ^ onload 


validation.js 




Both the wihdov/.ohlo^d 
assigh^cht a^d the ihi-tPagcO 
+Uh(i-tioh a\TC ih validation.js. 


mitPagcO scis up -the lihk 
bc-twcch ih c usc^a^c ihfu-t 
-field ah cvcht hdhdlev 



validation.js 


registration.html 
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server-side requirements 


And oh the server 


Before we can test out all our work on Mike’s registration page, 
we need to check out the server. What does the server need to get 
from our request? What can we expect from the server? 



us 伏， S use 作 ame 


username 


“okay” or “denied” 


丁 scv"vc\r y/ill v"C*tu\nr\ oksy 
七 is available ， ov* 
w dcmcd w *»-f r^amc V^as already 
bccir\ 七 3k 





o 


Server-side help is 
online. 

Remember, you can 
get sample server-side 
scripts and help with installing them 
online at 

http : //www. headfirstlabs . com. 




Dumb Quest! 


9 ns 


What’s that window object again? 

The window object represents the 
user’s browser window. 

So window.onload runs as soon as 
the user requests a page? 

Not quite that fast. First, the browser 
parses the XHTML and any files referenced 
in the XHTML, like CSS or JavaScript. So 
code in your scripts outside of functions 
is run before the function specified in the 
window. onload event. 


And that’s why I can assign a 
function to window.onload in my script 
file? 

Exactly. Any scripts referenced in your 
XHTML page are read before the onload 
event triggers. Then, after onload 
triggers, users can actually use your page. 

I thought you had to call JavaScript 
code to get it to run. What gives? 

Good question. You have to call code 
in JavaScript functions to get it to run. But 
any code that’s not in a function gets run as 
soon as the browser parses that line of code. 


But we should probably test this 
and make sure it works, right? 

Right. Always test your application 
designs before you assume they’re working. 

But nothing happens in this code. 
How do I test it? 

That’s another good question. If you 
have code that doesn’t produce a visible 
result, you may want to resort to the trusty 
alert () function... 
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designing ajax applications 



Tqst DriVQ 


Take the new registration page for a spin. 

Make sure you’ve made all the changes to registration . html and validation • j s, 
and then load the registration page up in your browser. Doesn’t look much different, does it? 

The in it Page () function doesn’t do anything visible, and checkUsername () function 
doesn’t do anything at all yet... but we still need to make sure checkUsername () is actually 
called when users enter a username and go to another field. 

It’s a bit of a hack, but let’s add some alert () statements to our code to make sure the 
functions we’ve written are actually getting called: 


window.onload = initPage; 
function initPage(){ 

document.getElementByld("username").onblur 


checkUsername 


alert("Inside the initPage() function' 


function checkUsername() { 

// get a request object and send it to the server 


alert("Inside checkUsername() n ); 


function showUsernameStatus() { 

// update the page to show whether the username is okay 



Now try things out! 


■Lnn 


i|| j — 



T\\t alcv-tO 仏户 lo : 

us sor,c visual 4 katk ..: 
乙表 d .. 



3 


/Chc-iidhriClibi.'GQm 


— 



th E t per// hi? j d Aar nl id b 喝 Dm 


validation.js 

… 把 well as 
wheh you Ch-fccv- a 
"the -Po\rm -field- 
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reusability rocks 


Some parts of your Ajax designs 
will be the same... every time 


We’ve already used window. onload and an initPage () 
function twice: once for Rob’s rock and roll store, and again for 
Mike’s registration page. Next up is creating a request object that 
works the same for the registration page as it did for Rob’s rock 
and roll site. 

In fact, lots of things in Ajax apps are the same. Part of your job, 
though, is to build code so you don’t have to write those same bits 
of code over and over again. Let’s see how creating and using a 
request object looks in Mike’s movie review site: 


food appli^-tioh desighevs look 

^ ^hd -fi^d ways -to 

to&t -fvom o-thev- desiahs 
Shd 3ppli^a*tiohS. 


o Your page loads up and 

handles application-specific 
tasks and initialization. 

❺ 


0^ 


Application-specific JavaScript 
gets called and needs to make 
a request to a server. 


la— 蜂，办 


A new request 
object is created. 



over over a^am '⑽丄 

fV 、 a% 一⑽ a W 


TV,e sewev 代― s ， 办 

u okay ， 比 d. 


❺ 


The server returns a response 
to the browser using the 
request object. 



The request object is 
configured with application 
data and sent to the server. 
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designing ajax applications 


crcatcRcquestO is always the same 

We need a function to create a request object in almost 
every Ajax application... and we’ve already got one. It’s 
the create Re qu est () function you saw back in 
Chapter 1, in fact. Let’s take a closer look at how this 
function creates a request in all types of situations, with 
all types of client browsers. 


IE 5 on the Mac still doesn’t 
work, even with this 
browser-independent code. 



Watcli it! 


Fo\r -this -to be vcusablc, it 

dcpChd oh 3 blrowscv* ov* 

details. 



TWis V^a^dlcs lo-b 
bvov/sevs a^d, 七一如。 
^ lotso^? d'lWcv-c^ usevs. 


Rcwcwkcv, have 
•bo keep *tv7' m 5 ⑽七 “ 
v/e md 3 
佔 a 七 He Wo>wscv 

undev-stav^ds. 


function createRequest() { 

try { 

request = new XMLHttpRequest(); 
catch (tryMS) { 
try { 

request = new ActiveXObj ect( M Msxml2.XMLHTTP M ); 

} catch (otherMS) { 
try { 

request = new ActiveXObj ect("Microsoft.XMLHTTP n ); 
catch (failed) { 
request = null; 



This Ime sends the 代 quest \>ack io the 乙 all” 匕 ode. 



tWeiare no o 

Dumb Questions 


So what is this request object thing really called? 

Most people call it an XMLHttpRequest, but that’s a real mouthful. 
Besides, some browsers call it something different, like XMLHTTP. It's really 
easier to simply refer to it as a request object, and avoid being too browser- 
specific. That’s how most everyone thinks about it anyway: as a request 
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avoid copy-and-paste 


Wait... If ifs exactly the same code as 
before, why can’t we just copy and paste? 


o 


Copy and paste is not good code reuse. 

The createRequest () function for Mike’s movie site is 
identical to the createRequest () function from Rob’s site 
in Chapter 1. And copying that code from the script you wrote 
in Chapter 1 into your new validation.js is a bad idea. If you 
need to make a change, you’ll now have to make it in two places. 
And what do you think will happen when you’ve got ten or 
twenty Ajax apps floating around? 


When you find code that’s common across your apps, take 
that code out of application-specific scripts, and put it into a 
reusable utility script. So for createRequest (),we can pull 
it out of validation . j s in the movie site and create a new 
script. Let’s call it utils . j s and start putting anything that’s 
common to our apps into it. 


Then, each new app we write can reference utils.js, as well 
as a script for application-specific JavaScript. 






上。二脚 ― 一 

m a\\ ouv 


a 
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designing ajax applications 



Make 


-to Y ouV " 0 娜 

todt) a^d 
o(( tV^c looses 

as 



Create a new file and name it utils . j s. Add the 

create Re qu est () function from the last chapter, or from page 61, 

into the script, and save your changes. 



Open up registration . html r and add a new <script> tag 
referencing the new Java Script, utils . j s. 


tomg habiis ，.^ ^ 

tode a 



<head> 

<title>Mike's Movies</title> 

<link href="movies.css" re1="stylesheet" type="text/css" / > 

<script src= n scripts/utils . js n type= n text/javascript M X/script> 

<script sre 二 ,, scripts/validation.j s" type="text/javascript"></script 〉 
</head> 


<html> 
〈script 
js ,f /> 

<img 

src="siteLo 兑 
png” A 



If you’ve already added createRequest () to validation . j s, be 
sure to remove that function. createRequest () should only appear 


registration.html 


in your utils . j s script now. 


tkereicire no ^ 

Dumb Questi9ns 


Why did you reference utils.js ahead of 
validation.js? 

Lots of times your application-specific 
code will call your utilities. So it's best to make 
sure the browser parses your utility code before 
it parses any code that might call those utilities. 
Besides, it's a nice way to keep things organized: 
utilities first, application-specific code second. 


But I still don’t understand how 
createRequest() actually works. What gives? 

Good question. We’ve identified 
createRequest () as reusable and 
moved it into a utility script. That’s a good thing, 
but we've still got to figure out what all that code 
is actually doing. 


Separate wkat s 
tke same across 


applications, anct 


turn tkat cocte 
into a reusable 
set of functions. 
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good apps work on multiple browsers 


Create a request object... oh multiple browsers 

It’s time to break into JavaScript and figure out exactly what’s going on. Let’s walk 
through exactly what each piece of create Re qu est () does, step by step. 



utils.js 


o 

be tailed ^v-o* 
m ouv 

a^l'i6a*b'»oy>. 

o 


Create the function 

Start by building a function that any other code can call when it needs a request object. 

function createRequest () { ^ _ (vfo ma 七七 cv 4a 七〒 *1^ 从 wSC 

// create a variable named "request" i . i v-ccuACs*t object >wul 

} kc^avc -tV^c same out V^avc 

V This msulates the 
^11 i^9 ^odc -Pv-om 


Try to create an XMLHttpRequest for non-Microsoft browsers 

Define a variable called request, and try to assign to it a new instance of the 
XMLHttpRequest object type. This will work on almost all browsers except 
Microsoft Internet Explorer. 


all the messy 
devils o-r b\rov/scV" 
Compatibility. 
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designing ajax applications 


o 


If all else fails, return null 

We’ve tried three different ways of obtaining a request object. If the parser 
reaches this request block, that means they’ve all failed. So declare request as 
null, and then let the calling code decide what to do about it. Remember, null 
is the object you have when you don’t have an object. 




尸 


request = null 




hu || puis bu ^ dch 
^ “llih 3 code, 

decide how -to ah 饮咖 . 


❺ Put it together, and return request 

All that’s left is to return request. If things went okay, request points to a request object. 
Otherwise, it points to null: 

function createRequest() { 

try { 

request = new XMLHttpRequest(); 

} catch (tryMS) { 

try { 

request = new ActiveXObject( n Msxml2.XMLHTTP"); 

} catch (otherMS) { 

try { 

request = new ActiveXObj ect("Microsoft.XMLHTTP"); 

} catch (failed) { 
request = null; 



Pov- the Uicirnci 
Exploircv -PahS 
out thcv-c 


|s(o watW … 七， 

sowct^'^5 S A 
vcWv'cd cvcd 
•rt’s just a va ' uC * 

c _^ 


yould 3 ⑽如 a" 

^ell W , a||i 二， 

wW A do “w 七 
a objed. 


return request; 




BULLET POINTS 


■ Different browsers use different 
syntax to obtain a request object. 
Your code should account for each 
type of syntax, so your app works 
in multiple browsers. 


■ 


No matter what syntax you use 
to get an instance of the request 
object, the object itself always 
behaves the same way. 


■ 


Returning a null if you can’t get 
an instance of the request object 
lets the calling code decide what 
to do. That’s more flexible than 
generating an error. 
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ajax is about interaction 


Ajax app design involves both the web 
page ANP the server-side program 


Even though there was already a web form for Mike’s registration page, 
we’ve got to interact with that form to get the user’s username, and later on, 
to update the page with an error message if the selected username’s taken. 

And even though we’re letting someone else worry about writing the server- 
side code, we’ve still got to know what to send to that code... and how to 
send that information. 


o 

o 

o 

o 



Take a look at the steps we need to perform to check a username for validity. 
Most of these steps are about interacting with either the web form or a 
server-side program: 

丁 Wis is y/Ka*t Cd\\ *to 
tvca*tcRc<\ucstO docs. 

O 

❺ 
o 
o 


Try to get a request object 


Show an alert if the browser cant create the request 

TVis m*tc\ra^*b W\i\\ 

七 lie v/cb -fovm. 


^csief(c(\ucsi() 
does^i handle 
e\r\ro\rs, so well heed 
"to do that ou\rsclvcs. 


Get the username the user typed into the form 


Make sure the username doesn't contain problematic 
characters for an HTTP request 


Append the username to server url ^=r 


TKcsc i^avc *to do W\{\\ 
usc\rv>amc 
b> sevvev. 


Tell the browser what function to call when the server 

responds to the request ^ This is the Wllb 把 k. w _| 

Tell the browser how to send the request to the server it a -Pew pages. 


Send the request object 


requ 

Ww though U ， ti| the 

ahd the bvowscir gives it the callback. 


Were s move scv-vcv- 


Good Ajax design is mostly 
about interactions. You’ve got 
to interact witk your users via 
a wet page, and your tusiness 
logic via server-side programs* 
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designing ajax applications 



Code Magnets 

Most of the code for the checkUsernameO function is scrambled up 
on the fridge. Can you reassemble it? The curly braces fell on the 
floor, and they were too small to pick up. Feel free to add as many of 
those as you need. 





| function checkUsername() 
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validate the requested username 


Code Magnet Solutions 


Most of the code for the checkUserNameO function is scrambled 
up on the fridge. Your job was to reassemble the code into a 
working function. 


function checkUsername() { 


Pivs 七， v/e dall ouv utility 
-fur^dtioh m u 七 ils js "to yt 
七 lie vc^ucst objcdt 


|l-P wc yt badk a ^W, 
-failed••• 



utils.js 


..so 


II tell use 圹 . 


alert("Unable to create request"); 


} else 


var theName 


jctElcmc^-tByld jv-abs -the 

elemeirrt o 灼 -fov-m W\{\\ value is l i /, 

U VewW ‘ 广 ^lly ^ 

'’username' ，） .val ue; 

I— 一 eU 广 ， % 

hkc spates ov r cst\oy> ^avks »v> tc^t- 


var username = escape(theName); 
var url = M checkName.php?username 


username; 


request.onreadystatechange = showUsernameStatus 


This is *thc 
will se^d *thc rt<\Atsi objct*t b> 
•the sevvev a^sv/evs 七 he ve^ues-b 


v-cc\ucs*t object *t° *tV)C 
scv*vcv*» TV^c k\uII w>c3y\s 
y/cVc r\ 0 *t StY\d\Y\(^ ^ o{\\tr 
-(•oV"w\3*tioir\ 3loir\^ y/Vth i 七 . 
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I^VcVc appchdmg the 
uscv-^arnc -to -the URL. 



丁 his tells the bvowsev how -fco send the 

\rc«\ucst IA/cVc usmj the (ornx 

method schdi^ i*t "fco the uv*l 
^oh-bmed \y\ the uv-l variable- /Ud U iv*uc w 
rwe 如 s i*t s asy^thvo^ously—-the usev- 

匕 an keep -fillmj oui the -fo\rrw while the 
scv-vcv- ^hetks theiv- use\r^dme- 


TW»s coAt a\\ V>— s 
va\'idafeo^j s * 



validation.js 









designing ajax applications 


What weVe done so far. 


Now we’ve got everything ready to make a request to the server 
when a new username is entered in. 


0hbl ⑽ a ^11 

to ouir 



What we still need to do 



TV^c JavaS6\r'^*t yb ^ 

sendee re^csi o\>\tct v«a 
trtaitRt<Yts{P *m 


function 


utils.js 


TV \rc«\ucs-t object tells 
the sc\rvcv- what 


usc\rharwc "tKc usc\r dKosc- 


Now we’re just about ready to actually have the server respond to 
our request: 


The scv-vcv vc*tuvv>s a value 

v/iictKcv- *tKc uscv-^amc Kas bccr> addcf*tcd- 




validation.js 



nc tailback WW updates -tKc {p s^suuss or 
以 Ue, losm 3 ^ user s mWat.on. 




What does that getElementByld() thing do exactly? 

We’ll talk about getElementByld () a lot when we 
look at the DOM in Chapters 5 and 6. For right now, all you need to 
understand is that it returns a JavaScript object that represents an 
XHTML element on a web page. 


And “value ”？ What’s that? 

The getElementByld () function returns a JavaScript 
object that represents an XHTML element. Like all JavaScript objects, 
the object the function returns has properties and methods. The 
value property contains the text that the element contains, in this 
case, whatever the user entered into the username field. 
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test drive 




Tesr DriVq 


Let’s make sure everything’s working before moving on... 

The JavaScript still doesn’t update the page in any way, but we can use a few more alerts to 
check that our checkUsername () function’s working the way we want. 

Open validation . j s in your editor, and add the code inside the checkUserName () 
function that’s shown below. It’s the same as the magnet exercise you just did, but there are 
a few more alerts added to help track what the browser’s doing. 


Once you’ve entered the code, save the file, and load the page in your browser. Enter 
anything you’d like in the username field, and you should see all these alerts displayed. 


function checkUsername() { 

request = createRequest(); 
if (request = null) 

alert ("Unable to create request"); 
else 



validation.js 


alert("Got the request object"); 

var theName = document.getElementByld("username").value; 


alert("Original name value : " + theName); 

var username = escape(theName); 

alert("Escaped name value : " + username); 

var url = "checkName.php?username= n + username; 

alert("URL : " + url); 


request.onreadystatechange = userNameChecked; 
request•open("GET", url, true); 
request.send(null); 





TKcsc alcv-ts av^e 
like s-fca-tus messages 

。浐 debu^ih^ 

iKvfovmdtioh... they let 
us khow what’s ^oih^ 

° h bchihd the 


>u should see av> alcv-t 
vc<\ucs*t is 
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designing ajax applications 



Wait a sec... this is supposed 
to be real application design? A 
bunch of alert() statements and 
popup windows? 


Asynchronous apps behave differently than 
traditional web apps, and your debugging has 
to account for that. 

Asynchronous applications don’t make you wait for a server’s 
reply, and you don’t get an entire page back from the server. In 
fact, most of the interactions between a web page and a server 
in asynchronous apps are completely invisible to a user. If the 
user’s web browser runs into a problem when it executes some 
JavaScript, most of the time it will just stop, and you’ll have no 
idea what happened. 


Alerts are a good way to track down problems the browser 
doesn’t tell you about. Alerts show you what the browser sees. 
They let you know what’s going on in the background while 
your users are happily typing away. 

二 


You can’t usually rely on a server to tell you tkere s a 
protlem in as^nclironous apps* It’s YOUR jot to : figure out 
il tkere s a protlem, anct respond to it in a useful mannen 


you are here ► 


71 




request object properties 


The request object connects your code to 
the web browser 

All we have left to do is write the code that the browser will call when the 
server responds to the request. That’s where the request object comes into 
play. It lets us tell the browser what to do, and we can use it to ask the 
browser to make a request to the server and give us the result. 

But how does that actually happen? Remember, the request object is 
just an ordinary JavaScript object. So it can have properties, and 
those properties can have values. There are several that are pretty useful. 
Which do you think we’ll need in our callback function? 


TV^c sc\rvc\r Will *to 7©^ 

rtwsi several 七 “cs Y/hlc ’七 s 
cm •七 W Wo^scv-uscs 

代 adulate to tell 

you v/Kcvc youv \rc«\ucst m its 

pv-ofi.CSs'nr\^ 


l-f i\\t SCV-VCV- »s SCirvd'nrv^ 

aa-ta as >(MU ⑽ Wll 
/ML bett 

tonla'ms i\\t strMtrs \rcsfowsc. 


status a^d s-b-tusTcxt av-c used by the 
b\rowsc\r h> tell youv- todt the HTTP 
status that was v-ctuv-hcd by the 

sudh as ZOO ^ VC SCV-VCV- 

沪 hks 〜饮 ytu 3 wov-ked as it should, ov 
午 O 午 卜 ： Noi Fouhd / ； whch the scv-vcv- 
乙 ouldh't -fihd the \rc<\ucstcd URL. 



- Wt\\ look mov-c at yav\L 
^rcspohscs ih Chaptcv- % 

M ^«Pohsc will be 
St °D h ^po^Texi This 

•: USu L al, y ic ^i but it M 

X 亂 daia. 9 


o^aaystatc^a^ *«s ^ ^ 

*to "tell b\roy/scv" TU\r\£.*tioy\ xo t3ll 
y/V^cr\ i\\t scv-vcv \resfcmds *to a ve'uest 


Tke trowser makes tke 
server’s response available 
to your code tkrougfli tke 
properties oi tke request object. 
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designing ajax applications 


You talk to the browser , wot the server 

Although it’s easy to talk about your code “sending a request object 
to the server，’’ that’s not exactly what happens. In fact, you talk to the 
web browser, not the server, and the browser talks to the server. The 

browser sends your request object to the server, and the 
browser translates the server’s response before giving that 
response data back to your web page. 



utils.js 


/ +uh<i-tioh ob-bihs 

the irc<\ucs-t 

objc^*t 七 |^ bv-owsev-. 



1,__ 

J h « 1 

web browser 





validation.js 


TKc £.KctkUscv-y\amcO ^v\choY\ uses 
七 he stv\AO mc*tV^od of *tKc v-c<\ucs-t 
okjedt *to ask i\\t bvov/sev *to fass 
-tKc vc<\ucst on bo *tV^c server. 



The bv-owsev 
dommuh^a-tes with 
the sev-vcv- usihA -the 
WTTP pv-o-to^ol. 



web server 



r~\ 

[request I 


^speds -to the ，毗 
thc the p^opc^ics o-f 4 c 

obje^i ahd thch SChds the ob>d 
to showUscvhamcS-ta-tusO. J 


validation.js 


TWis h 代⑽ several W。. 
You II wsc i\\t vcadY^-ta-tc 
ncv*b/ *to V^o>w 
^av 如吒 如 sevvev '.s m 

ves^ond'm^ *to 3 vc^ucst 


you are here 


























ready sfafes 



6vca*tcs a >rt<\Atsi object 


^eaJy states up cj^se 


The browser uses the readystate property of the request 
object to tell your callback function where a request is in its 
lifecycle. Let’s take a look at exactly what that means. 


T^is is *tKc \rc«\ucs*t objedts 
veady s*ta 七 e, stov-cd *m the 


l/Vhch the \rc^ucst objects 
\rcadyS-ta-tc is ^ the 


uvIHeadev 二 •… 


validation.js 


showUsernameStatus() 


showUsc\rh«lmc£-tol-tusO 

^dllbadk -Puh^tioh uses -the 
\rcspohsc -to update 

the page. 
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designing ajax applications 


A-P"tc\r -this s-ta-tcmCht is executed ； 
the v-c^ucs-fc object khows how -fco 
^ohhCdi 3hd what-to ^OhhCdt -to. 


At v-cad^S-tatc I ) 

ve^ucst »s ready 仫奶 d. 



The scv-vcv vesponds v/rtii a vcadyS*t3*t< 
Z y/Kile i*t s v^ovkm^ or\ *t^c vc<\ucs*t- 
Response iicadcvs, y/WiA provide 
m-fovm 3 *tior> about 七 he vcspoi^sc, av-c 

available alo»^ VrUi a s*ta*tus dodc- 


TV^c sewev scv\ds 
vcs^ov\scs \>^tV. 3 "b 
sevevdl \>o\v\*b duv'^5 
i\\t fvodcss. 
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the browser calls back your code 


The browser caHs back your 
fuwctiow with the server's response 

Every time the response object’s readyState property 
changes, the browser has to do something. And what does 
it do? It runs the function assigned to the request object’s 
onreadystatechange property: 


^owse, ,]ll s ihjs / U : S : 卜 ‘ 


function checkUsername() { 

request = createRequest() 


request.onreadystatechange = showUsernameStatus 



In your callback function, you need to make sure that the 
response is actually ready for you to use. You can check 
the readyState property and the server status, and 
then take action based on the server’s response: 



validation.js 


sevvev sc^ds 

• 七， s w oka7 ， >， 

usev^ame «s Wtt 



else 


This is -the -Puhdtioh hdme wc used *fov~ 

ohircadysta-tc^hahgc pv-opc^-ty. l-f 

祙 e doesh'-t the 

-fuh^-tioh v/o^i be called. 

TKis i-f w'dkcs suV"C 七 

v\ov\C of *tKc vcs*t of iiic Code 
\-iay\s unless ihe readysiaie is 
Ac scv-vcv- is -f misKcd- 

if it’s okay, no error message to show ^ 

cvc\rythih 9 is okay. 


function showUsernameStatus() { 

if (request.readyState 
if (request.status = 



==( 2 M> 

if (request.responseText 



// if there's a problem, we 1 11 tell the user 
alert("Sorry, that username is taken. M ); 


f~^ 

I mitPajC ； J 

二…. 

I—J 

validation.js 


TW»s tode ^ocs m 
val'»da*t»o^ *to°* 


J 
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designing ajax applications 



Tesr DriVq 


Add the showUsernameStatus() function to validation.js, 
and load the registration page in your browser. 

Try entering any username except “bill” or “ted.” Your browser 
should display all the alerts we added to test the in it Page () and 
checkUsername () functions. 


a' 

n rpc f _ h ■ *dfa ltU ta pjthi 

A M imnl 64^1 

1 

hl lp. ■ 

twrfjn CifimJ i«oiikE3l 



iJf ^ a 

dcb « odc ， but 

a, ^o,- 


Now try entering “bill” or “ted” as the username. You should get the 
error message that’s displayed by showUsernameStatus (). 




This message should be 
displayed i? you chtcv %i||’’ 
^ thch leave 

七卞 心 | d , £ omCOhC 

with that useirhame is 

al 代 ady vegisteved. 


Once you’re sure everything’s working, go ahead and remove all ^ - 
those alert statements in checkUsername () that you added to 
test the code. The only alerts that should be left are to report that a 
request can’t be created, in checkUsername (), and to report a 
username’s already taken, in showUsernameStatus (). 


-bV^c 


hl 0 Y/ ^uVc suve 
加 6W “七 

server v/o^rKs, 70 

一铷仪 a^t() 
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does it work? 


Show the Ajax registration 
page to Mike... 

Everything works. But when you give all your code 
to Mike, and he goes live with the new improved 
registration page, there are still some problems: 



Em/aMr l 
il^r nptic 


Wkat kappenect? Diet all tke work 
you put into tke registration page 
get lost? Ignored? 


Wkat cio YOU tkink? 


譬暑 i 




I tried to enter my information just like 
I did before, and the same thing happened 
When I pressed the Register button, the 
browser threw away all my work! 
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designing ajax applications 


The web form has TWO ways to send 
requests to the server wow 


Suppose a user does just what you expect: they enter a username, 
and while an asynchronous request is going to the server and 
getting handled by the browser, your callback is running, and the 
user’s filling out other information on the form. Everything works 
great — just like you planned. 

But suppose the user’s so eager to get to Mike’s review of Iron 
Man that they put in their username, ignore everything else on the 
form, and click “Register.” What happens then? 


The user enters a username 

An asynchronous request is sent to the 
server to validate the username. 


The user clicks ’Register 

The user ignores the other fields an 
clicks Register ； submitting the form 


^J^erve^e+urns a new page 

The server replies to the form submit y 
returning an (empty) error form. 


the usc\r leaves -the usev-hame 

士 ield, ou\r toAt schds a objed-t 

to the SCV-VCV-. 



VW scyrvcv vesfonds 
[v^c ved 化 aW vc'wes 七，七 Vjc usev 
RcysW, av>d 


entire rtow fajc »s 

於 erne d user’s 

filled *m, but y/rth 釙 c^ror about 

七 1^ usc\nr\aw'C kemj *t3ker\... 



TTiC sc\rvc\r doesh't that 
^ ouV " ^syhdhvohous \rc^ucs-t hash^-t 
\ 一 caused the usev- -fco 

usc\rhdrnc. jus ■(: \rctu\rhS 

a bla^k c\r\ro\r 


TWis is y/V^a-t WC were br^ -to -f i%! 

Eveh the box 
s ^yi ^9 the uscirhamc was 
"t^kch h^s 0ohC missih^ 
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expect the unexpected 





You 


can never 


assume 


your 


users 


will cto tilings 


But we never thought about 
users ignoring all of the other 
fields. How do we keep users 
from doing that? 


Frank: Well, we can’t keep users from skipping over fields, 
but maybe we can keep them from getting ahead of our 
request. 

Jill ： You mean validating the username? Yeah, that’s perfect, 
but how do we do that? 

Frank: How about we just disable the Register button until 
the server responds to the username validation request. 


Jill: That would solve this problem, but it seems like we 
need something more. 

Frank: Like what? They’re submitting the form too soon, 
so if we prevent the submission, the problem’s solved. 

Jill: Well, don’t you think we need to give the user some 
idea about what’s going on? 

Frank: They’ll know what’s going on when we enable the 
button. Until then, they should be filling out the form, not 
trying to click ‘Register.’ 

Jill: But don’t you think that might be confusing? If the user 
finishes filling out the form, or doesn’t want to fill it all out, 
then they’re just going to be sitting there, stuck, and they 
won’t know why. 

Frank: Well, we need to let them know the application is 
doing something. What about displaying a message? 

Jill: Another alert? That’s just going to annoy them in a 
different way. How about a graphic? We could display an 
image when we send the request to the browser... 


exactly tke way 
you cto •“ plan lor 

EVERYTHING! 


Frank: ...and another when their username’s verified. 

Jill ： Hey, and if we used an image to show whether the 
username is okay or not, we could get rid of the alert when 
there’s a problem with the username, too. 

Frank: Perfect! Visual feedback without annoying popups. 
I love it! 
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designing ajax applications 



Make 


0 鄭 


'youv 
todt) 

t\\tcy ^ 
tV\c looses as 

\jO\A 



Display an “In Progress” graphic during verification requests 

When we send a request to the server to verify a username, we’ll display a graphic 
next to the username field, telling the user what’s going on. That way, they’ll know 
exactly what’s happening as they work through the form. 


gctElcmchtBy/d is probably 
sxairtihg -to look -fiamiliav-. H 
lets yo“ aucss ah clc^i 

咖如 )(HTML page. 


function checkUsername() { 

document.getElementByld("status") 

request = createRequest() 


images/inProcess.png' 


Display a status message upon verification 

Once the request object returns, we can display another graphic in our 
callback function. If the username is okay, the graphic indicates that; 
otherwise, we’ll show an error icon. 



P\s ? la7m3*tw.s way 七 ciu 从 c usw 

oy\. 


vanaation.js 


Wc 

A\{jcM -tV^c 
alcv-t 
•m -favov- 

^v-a^Wital 

\C.oy>- 


function showUsernameStatus () { Tiiis is displayed 

i-f scv-vcv- says 七 he 

if (request. responseText — "okay") { \mmt is okay* 

document.getElementByld("status") .sre = "images / okay.png' 


else 


alert ( "Sorry, ~t±ra±~~asei: name ~ is baken . M ) 


document. getElementByld ("status") . sre 


="images/inUse.png"; 

个 

This g\raphid is shovm i*f 
the usev-harwe is takch. 




What do you think about this approach? Does 
it follow the principle of separating content from 
presentation? Would you change anything? 


validation.js 


you are here ► 
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separate, separate, separate 


o 



O 


If were changing the image in our 
JavaScript, aren*t we mixing in our 
presentation with our behavior? 


Try and keep your presentation 
in your CSS, and your behavior in 
your JavaScript. 

Your XHTML stores structure and content. 
Your CSS should handle presentation, like 
images, colors, and font styles. And your 
JavaScript should be about what your page 
does: the page’s behavior. Mixing those 
means that a designer won’t be able to change 
an image because it’s in your code. Or a 
programmer will have to mess with a page 
author’s structure. That’s never a good thing. 


It’s not always possible, but when you can, 
keep your presentation in your CSS, and use 
JavaScript to interact with the CSS rather than 
affecting the presentation of a page directly. 


Lcfs create CSS classes for each 
state of the processing... 


Instead of changing an image directly, let’s put all the image 
details in our CSS. Open up movies . css and add the 

following CSS selectors: ^ . , i li # 

TW.S dlass just sets u ? 

lodatiov^ ^OV ?^ro6CSS 丨 6 ⑽ s … 


广 


Add 

-fouV" *to 
youv C^S- 



..广 d 仏仪 oi^ 



3 


... existing CSS ... 

#username { padding : 0 2 Opx 0 2px; width : 198px; 

#username.thinking { background : url( n ../images/inProcess.png") 
#username.approved { background : url("../images/okay.png") 
#username.denied { background : url("../images/inUse.pnq");, 
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movies.css 


i\i\\ vc 
















designing ajax applications 


•"awd change the CSS class with 
our JavaScript 

Now our JavaScript doesn’t need to know any image 
names, paths, or anything about how the process icons 
are being shown. Instead, we just need to know the three 
CSS classes that represent each stage of processing. 

^USC\nr\amC.a\>\>V-OVcd 

rtcvc avc ^ 

CSS 6\a ss 灼 awes. 




Uscv-^amc is okay- 

J 

is iskcK 



Now we can update our JavaScript (again). This 
time we’ll just change the CSS class instead of 
directly changing an image: 



function checkUsername() { 

duuument. getElemervtDyld ( M 3tgrbuo n ) . ore = -’ ▼imaged/inProcess ■ fin 兮 

document.getElementByld("username").className = "thinking 

request = createRequest(); 


you C-3y\ 

css tlass 
us'm^ 七 he 
dassh/awc 



validation.js 


function showUsernameStatus() { 

• •參 

if (request.responseText == "okay") 
-document. gotElGmontByld( "otatus") 




-to remove the 

tha-t 匕 hahged ihc 

image divc^tly. ^ 

J ’imagp i S/nkqy pn)j-^-r- 



document.getElementByld("username") .className = "appro] ed' 


else 


alert ( n 3 uj_i ~ttid t~gser name~ire ― token . n ); — 

'documfeiiL . yeLEfemenLDy Id ( 11 b LdLUS" ) . bre ■ "imagoc/inUse . png 1 


document.getElementByld("username") . className 


denied' 





































you rule 


So, listen. I’m going to use a single image for 
the process indicator. Then, in the C55 t Til just set 
the different classes to show different parts of 
the image. That means less image loading and faster 
changes. Sound good? Do whatever you need to do to 
your code to get this to work, okay? 


O 


o 


All o*f *b^»s CSS Now 

-tv^cv-cs jus*t oy\c be” 

moved av-ouhd CSS 





...existing CSS 

#username { 

background : #fff url('../images/status.g 
padding : 0 20px 0 2px; width : 198px; 

#username.thinking { background-position: 202px -19px; 
#username.approved { background-position : 202px -35px; 
#username.denied { background-color: #FF8282; 
background-position : 202px -52px; } 



202px 0 no-repeat; 


^Iikc ； s web 
dcsighcv- is 
always -Pull of 
i^cw ideas. 


Changes? We don't need ho stmkiw' 
changes! 

Mike’s web designer made lots of changes... but she didn’t 
change the names of the CSS classes for each stage of 
processing. That means that all yourJavaScript still 
works ，with no updates! When you separate your content 
from your presentation, and separate both from your behavior, 
your web application gets a lot easier to change. 

In fact, the CSS can change anytime, and we don’t even need 
to know about it. As long as those CSS class names stay the 
same, our code will happily keep on working. 


Good separation 
oi content, 
iresentation, and 
jekavior makes 
your application a 
lot more flexible. 
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designing ajax applications 


Owly allow registration whew ifs appropriate 

With process indicators in place, all that’s left is to disable the Register button 
when the page loads, and then enable the button once a username’s okay. 

That involves just a few more changes to validation . j s: 


Disable the Register button 

When a user first loads the page, the username hasn’t been checked. So 
we can disable the Register button right away in our initialization code. 


By sctiihg disabled pvopcvty 
-the us^ ^ ^ill ih 
+'clds, but -they Uh’t p 咖 — 
submit butioh uhtil wcVc veady. 


function initPage(){ 

document.getElementByld("username").onblur = checkUsername 

document.getElementByld("register").disabled = true; 



Enable the Register button 

If the username is okay, the user’s ready to register, so we need to enable 
the Register button. But if there’s a problem with the username, they need 
to try again, so we should keep the Register button disabled. And just to 
make things easier for the user, let’s move them back to the username field 
if their username is rejected: 



validation.js 


This 
the usev- 
-to the 

-field- 


function showUsernameStatus () { \( . , 

,T is okay, 

… C^blc the Register butt) h 

if (request.responseText == "okay") { 

document.getElementByld("username").className = "approved 

document.getElementByld("register").disabled = false; 



else { 

document.getElementByld("username").className 
document.getElementByld("username") .focus (); 
document.getElementByld("username") .select (); 

document.getElementByld("register").disabled : 


denied' 




w'mdowoy>load 
"mitPajej 
urltleader 二 … 



|Jf usc^a^c ^ 二一 


七 akc 〜 



on.js 


butW d ， saWcd. 


you are here 
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check it out 




Tqst DriVQ 


Make sure you’ve updated validation.js and mpovies.css ， 
and load up Mike’s registration page. Try it out to make 
sure everything’s behaving like it should. 




The subrhi-t bu-t-toh 

is disabled. 


The image files referenced 
in your CSS are in the 
download folder from Head 
First Labs. 


Be sure you’ve got the complete examples 


folder from Head First Labs, including the 


you a 

this ih p\rog\rcss gv-aphid 
should be displayed- 


TWis 
-tells you 

okay. 


You sukw'i*t 
pay v\ovj- 


process indicator image. 


86 Chapter 2 











































designing ajax applications 



Now Mike's pa^e 


Thafs what Tm talking 
about... satisfied users 
and a much cooler 
registration page. 


dill JiiH . 恳 .U 

an il^fl i>Wlp_ 


"dhci 




ow his -Pahs ^ get 
■to his ir^ovic reviews 


企 ...lets users keep Working whih th^iV requested 
' usernanies are Verified by Mikes serVer. 


參 


...prevents user mistakes by disabling buttons 
th 社 avetrt sa?e gr approprl^e t9 use, and 
enables thQse buttons when they c^e useful 

...doesrft annoy ]ifs users With intrusive popups, 
but still giVes tK^ni useful Visual ?eedl3ack. 



Alo^ tv^e ^ ^l itA 
. Wl i m( x about 

tW t a, ^ r 

七 radvt 、 0 灼 al 
Vcs\>oy\sc 


dcs»^ 


二 ? 上 7 二 sc wodcl . 




you are here ► 
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word search 




Word Search 


Take some time to sit back and give your right brain 
something to do. It’s your standard word search ； all 
of the solution words are from this chapter. 



Word list: 

ActiveXObject 

Asynchronous 

Ajax 

Cache 

Callback 

Null 

Open 

Readystate 

Send 

URL 

XMLHttpRequest 
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designing ajax applications 



Latel Magnets 


All the labels describing what’s going on in the new-and- 
improved registration page fell to the ground. Can you 
place the labels in the right place on the diagram? 











乙 vcaics a \rc<\wcs 七 objed 七 . 


object hoy/s how L 一 


vcsfoy\dis a 
, oJf t Y/o 士 m3 


〜 d 匕〜过仏 


^Ohhc^-t 


At this stage data is 
dovmloddmg m^fco -the 

v-c^ucs-t object, but its 的。七 

'“iie \rcady -to be used yet. 


丁 V^c sevvev Y/Vth a 

vcadv^-ta-bc 

pH status 

yres^o^se V^cadcv-s avc available. 





The \rc^ucs-t object has bee 的 

tv-caicd, bui has y\o data 

v\o ih-fo\rma*tioir> \y\ its 
various p\ropc\rtics. 




薄 


you are here 
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know your ready states 



Label Magnets Solution 

All the labels describing what’s going on in the new-and- 
improved registration page fell to the ground. Can you 
place the labels in the right place on the diagram? 


uscv a 
crtaits a object 





but has ho daia 

aYyd ho ih iis 

晴 ious propd 


request 


createRequ' 


est () 


showUsernameStatus() 



TV sevvev yresfo^ds ^ ^ 

— 触 oU W 十寸 3 

。“ L pH status a^d 
ves^se V^cadcvs avc available. 



r Respons^ 


o 


in prog 





^ A 

esponse 


午 , 




Gettin 


g 、 


responsey 


hi this s-bgc, data is 
dowhloddi^^ ijrfco the 
v-c^ucs-t object, but its 
«\uiie \rcady -to be used yet 


o 


By i\\t -time i\\\s s*ta 七加伙七 

is c%ctu*tcd, He vc«\ucs*t 
object kr\oy/s iioy/ *to formed: 
a 灼 d *to 乙 orme 。 七 *to- 





The sefrv ^ se^ds 一 
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Word Search Solution 



designing ajax applications 


Word list: 


ActrveXQbjeet- 



GaHbaek 



Readyetate 

Send- 



^MtHttpReqtrest 


you are here ► 
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3 javascript events 




I Reacting to your users ♦ 



Sometimes you need your code to react to other things going 

On in your web application... and that’s where events come into the picture. 
An event is something that happens on your page, in the browser, or even on a web 
server. But it’s not enough to just know about events... sometimes you want to respond to 
them. By creating code, and registering it as an event handler, you can get the browser 
to run your handler every time a particular event occurs. Combine events and handlers, 
and you get interactive web applications. 


this is a new chapter 
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marcy^ yoga vision 


It all started with a downward - facing dog... 


Marcy’s just opened up a new yoga studio that caters to programmers and 
techies. She wants a website that shows the different levels of classes she offers, 
the times they’re available, and provides new customers a way to enroll in a 
class... all in a cool, intuitive package. But she doesn’t have a clue how to build 
that kind of site.... that’s where you come in. 

To give you an idea of what she’s looking for, Marcy worked up a quick sketch of 
what a page on her site needs to show her customers: 


Mav-^y has a 
dcsdlrip-tioh o( 

㈡ 匕 h dldss ； so 
^us*torncv*s will 
khow what "to 

...dr\d a sample 

•iruay -fvorw 
eddV) dldss, -too. 




p 


o-P-fcvs *t^\rcc dlasscs： 
3clv3y\dcd- 


. 1 





BegiNNer 

ThiS iS where you 
Should $tart if 

you’re New to yoga. 


iNtemediate 





wheN the be^iNNer 
course a challenge, 

try thiS oNe. 


Ad^3Nc0d 
Very challeNgiNg! 




Schedule 


ENroll 


CusWc« should be able t) see tKc s^cdulc 
u tlass... ^ ^ a 

^ov- WWal ••切十“ u “ lass docs 

七 Wis s\\o^i sg^edule 


Have you met any programmers? They re 
not exactly patient people... Ive got this 
little sketch I did, but I need it turned into a 
high-tech, super-responsive site. Can you help? 



c 十饮“ ah ⑽ oll oh | ihe 

T^ ys L 5 i a P 呼 the 
1 ,!° ^ ai {o handle 

ihc b ^^-chd lo 3 i^ -fov- this. 


/Waay khows hc\r dusio^s, but does^i 
khow how -to build a s\it ihai ^atevs 
"to 七 1^ 你 … i 七 looks like rwi ☆七 be 

just the tVmg -to handle hcv- -Past-pa^cd, 
p\ro0\rdrhmc\r "types. 
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javascript events 



Design Magnets 


It’s time to turn Marcy’s rough design into something you’d like to see in your own web 
browser (you’re a programmer too, remember?). At the bottom of the page are lots of 
magnets representing parts of a potential web page. It’s your job to arrange these on 
the web browser in a way that looks great. Also, see if you can design the site so when a 
customer clicks on a class level, the description and a picture of just the selected class 
is displayed. 


I 灼 the irest of this 

匕 hapten you’ll 
build this site, so 
■Biihk dbou 七 y/ha 七 
Ajax lets you do ： 

丄 Ihge pa\rb o( the 
fage ih \rcal--tirwc, 

talk {jo the SCV-VCV- 

^syhdhvohously, d 



you are here ► 

























design marcy^ web site 




A Design Magnet Solution 


Your job was to arrange the design magnets onto the web browser in a way that 
looks great. Also, you should have designed the site so that when a customer clicks 
on a class level, the schedule, description, and a picture of just the selected class 
is displayed. u ; 

Hc ^ cs Ajax 

wc oui p^ts 

七 he paac wi-thou-t a 

reload? Of £.ou\rsc... 


T\)CSC ir^a^cs 
yfill display a 

dcstvif*tior> of 
dldss ^\\CY\ 

*tiic usev volls {\\t 
mouse ovc\r 



he *t^bs ; 

^ 匕 bss schedule. 

'll 9ct that oh 

Ci^cihd usih^ a 
quest obje^-t. 

..W a d 以寸广 

oJf i\\t tlass >w»ll oc 
V^cvc- 


1/VliCh the 

schedule is 

displayed, dkkir^ 
the EhVoll but-fcoh 
will take the usev- 
■fco a hew page. 


as 


K,r ⑶二口二 ^ 

i\\t 6lass sdi^cdulcs. 

丁 liis dhdp 七 ev* will be wo\rkih^ o-p-p 
"the design shoy/h hc\rc, but -feel 
-Pv-cc "to dhahjc things up a^d 
irwflcmCh-t you\r design ihstead … 
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I love it, especially those 
images and the tabs! Build 
it just like that. 







































javascript events 




Suppose you want to build the website shown on page 96. In the space below, make 
notes about what should happen when customers click on different buttons, and what 
interactions you think you’ll need between Marcy’s web page and the server. 




Web server 


The studio Marcy teaches at has server-side programmers that can build whatever 
we need... but we’ve got to tell them what to build. What sort of server-side 
programs will we need?. 


you are here ► 
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ajax is about interaction 


Sotj/tlpH 


Your job was to make notes about what should happen when customers click on different buttons, 
and what interactions you think you’ll need between Marcy’s web page and the server. 


J^ ，s ^ -bb each class. 
usc^s click Oh a iab, \i 

^hcdulc W -that class. 





Bach -tab 


> update 
pav-t ok 


s *tV^c 

i\\t pay. 




Web server 


should show a dcs^iptioh o-f 
the dlass. Should -they 如 hythe 
^oh-tch-t -to -the scried class, -too? 


mdl WtW.. 



,bss IS st\M sey.a ^ 


y\ Cir\V-ollnf\C^*t v-c^ucs-t hds -fco Jo *fco 
"the scv-vcv-. But wc dor/t v\ttd 
(or -that- That v-c<\ucs-t da^ be a 
^ovmal syY\cMroY\o\AS v-c^ucst 


diass *»s sclcdtco ^ 
tUss -to scrvcr-sidc ? 哼批 . 


l^s okav youVc y^o-t suyrc abou 

“ cvcV w, ^ W,11 ^ T 

aUvs ask 

Je so^e tWmy out as v/e 50 . 


The studio Marcy teaches at has server-side programmers that can build whatever we need... but we’ve got to tell 
them what to build. What sort of server-side programs will we need? Wc mcA .a..that.iakc^.a..da$$.ndr^c,... 

• 扑 (J. up some soy-t. o^. c^\rollmc^.*t. Ji. sounds jike ' .Jot • 七 k /foym, so .v/hc.^ usc\rs dlidk a bu*tiph,.... 

vit a.\rc^ucs-t .ip. .ihc.?c\ryc\r J;o\r c^olUc^t/m. 灿 c. sejedied jtl.ass.. 

J\y\d .y/ha^. abou*!; . 七 .p^jesf Wlc. —jhi. .loccd. .io. )rc^ucs^ .i-hosc /f\rom ^ c. sc\ryc\r. spmc-jt ； V!*?5 - 

seems (wr\Y\)f about j、. su\rc y/hat yet ；； 
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javascript events 


tWeiare no o 

Dumb Questi9ns 


I came up with something totally different for my solution. 
Is that okay? 

It is as long as you figured out that you need to make a request 
to the server to enroll for each different yoga class, and realized that 
each tab should bring up a class schedule and description. But some 
details are still fuzzy. What do those buttons on the left do? And do we 
need an asynchronous request to get information about each class? 




Are those tabs along the top of that drawing? 


They sure are. Tabs are a great way to let users not only see 
different options, but easily click on each option to find out more. 

XHTML doesn’t have a tab control. Do we have to buy a 
third-party tool or something? 

No, we'll do it all using graphics, some nifty client-side 
JavaScript, and a request object to fetch the schedule from the server. 

But there are some toolkits that do that stuff for you, right? 
Why don’t we just use one of those? 

Toolkits are great, but it’s much better to know what’s going 
on underneath something like script.aculp.us or mootools. In this 
chapter, you'll build a simple tabbed control on your own... and then 
when you want to use a toolkit, you'll know what’s going on, instead of 
depending on someone else to figure out your JavaScript for you. 

And of course, when the toolkit you're using doesn't do just what you 
want, you'll be able to change it or write your own controls. 


This doesn’t look like much new... didn’t we do something 
similar with the movie review site already? 


A 


That’s right, you did. Although in that case, there was a lot less 
interactivity on the web page. Users signed up, and the page and your 
code did everything else. On this site, we’ve got a lot more going on: 
dealing with several different button presses, figuring out which button 
was pressed... loads of new interactivity issues. That’s what most of 
this chapter focuses on, in fact: events and interactivity. 



s^ ? ta^o-us ^o\s 

twy 


Try not to rely on 
any toolkit unless you 
understanct tke code 
LekinJ tkat toolkit. 

Tkat way，wken tilings 
don’t work tke way you 
want，you can iix tke 
problems vourseif> 


you are here ► 
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ajax involves lots of existing technologies 



Hang on a second... half of this is web design 
and plain old JavaScript. I thought we were 
supposed to be learning about Ajax, not a bunch 
of events and boring scripting. 


Ajax IS mostly JavaScript, events，and 
lots of boring scripting! 

Most apps that use asynchronous requests have a lot 
more code that deals with web pages, objects on that 
page, and doing basic JavaScript tasks. The actual 
request object code may only be a callback function and 
a few lines in an event handler. 

But you really can’t break an application up into 
“JavaScript” and “Ajax” and “CSS.” It all works together. 
So even though you’ll be spending a lot of time in this 
chapter working with XHTML and CSS and event 
handlers, you’re really building Ajaxian applications: 
responsive, user-friendly, modern web apps. 


Tke more you know 
about JavaScript, 

XHTML, anJ CSS ， 

tke more ellective 
and usatle your 
Ajax apps will lie* 
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javascript events 


Ajax apps arc more thaw the sum of their parts 

Ajax apps are really just a combination of lots of pretty simple technologies: 
XHTML, CSS, JavaScript, and things like the DOM, which you’ll get to in a few 
chapters. In fact, if you take a close look at Marcy’s app, most of the work is 
not Ajax-specific. It’s XHTML, CSS, and JavaScript... with a little asynchronous 
requesting added in just when it’s needed. 


W 'Solves 

XHTML ay，a CDd ，七广 

㈣ 以工 v 7 



Most oUhe 。少 


Web server 

Sch f ，h 9 ^ io ih c se,ve, 

；； ol 7 a “ 

a ” as a ^esi object 

The ma'm CoY\{zr\{, -fo\r 
dlass is )<ttTML. I/Vlcll -that 
)(ttTA1L an dsy^dhroirtous 

bu 七七 he vcspor\sc -fvom 七 he 
scv-vcv- is jus-t move )<ttTML. 

T^/rtTMU^^W.al 

move ? vese^o^ to 

WrtVv 


you are here 


101 


























marcy^ xhtml page 


Here's Marcy's XHTML 


Below is the XHTML for Marcy’s page... it’s already got a few references to 
the JavaScript files we’ll need and several <div>s representing the different 
parts of the page. Go ahead and download this page, along with the rest of 
the Chapter 3 examples, from the Head First Labs web site. 


<html> 

<head> 

<title>Yoga for Programmers</titl ^ 


u-tilsps is -the utility -file wc 

Seated ih Chaptcv- Z with 


text/css" / > 


<link re 1 = M stylesheet" href= M css/^Tga .css" type 
<script src="scripts/utils . j s " type="text/j avascript’▼></script> 

<script src="scripts/schedule . j s n type= M text/j avascript’▼></script> 


Well be add'mj a -few 

Y\t^ *to 

•m i\\\s 


<body> 

<div id= n schedulePane n > 


s ^ h ^uic.js will sW the 
appkatbh -啊心 JavaS^ipi 


</head> 

I 倉 • ii f § . 

TV >wo\rk'm 5 settlor of 
▽ay is "tV>c 

WedulePaW dW. 

<img id= n logo" alt= n Yoga for Programmers" src= M images/logo.png" / > 
<div id= f, navigation n > 


t 




<img src= n images/beginnersBtn.png" alt= f, Beginners Yoga" 

TVis dw title= n beginners n class= n nav n / > 

dor\*ta'ms <i m g src="images/intermediateBtn . png" alt= M Intermediate Yoga 


images ov\ 

lc-f*b side 
i\\t pajc- 


class= n tab" / > 


title= n intermediate" class= n nav n / > 

<img src= n images/advancedBtn.png" alt= n Advanced Yoga" 
title= n advanced" class= n nav n / > 

</div> 

<div id= M tabs n >^~' that v-cpvcscht -the u -tabs. w 

<img src="images/weIcomeTabActive.png" title= M welcome' 

<img src="images/beginnersTabInactive.png" title="beginners" class="tab" / > 
<img src= n images/intermediateTablnactive•png" 
title= n intermediate" class= n tab" / > 

<img src= n images/advancedTabInactive•png n title="advanced" class= n tab" / > 

</div> Wcrts y/V^cvc v/c v\ttd *to u\>da*te 

tlass d's^lay a 

<div id= M content"> s^cdulc (or tlass. 

<h 3 >Click a tab to display the course schedule for the selected class</h 3 > 
</div> 


</div> 

</body> 

</html> 


with yoaa^ss - 
thc used by the Yoaa web 

泛 30 c all ohlihc ai the Head 

卜 L.^bs web si*tc. 


dhd 
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classes.html 



javascript events 




Tqst DriVQ 


See what Marcy’s page looks like pre-Ajax. 


Download the examples for Chapter 3 from the Head First Labs web site. Go ahead and 
open up classes . html, and see what Marcy’s page looks like. There’s no interactivity 
yet, and you may get a message letting you know that schedule . j s can’t be found. That’s 
okay, we’ll get to all that soon. 

|,k c tabs. |Vs all /HTML 



looks a lot like -the sketch 
page % A/ow wc jus-t have -to 
out the i^ciiviiy 
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events = interactivity 


Evgwts arc the key to interactivity 


Marcy’s page needs to react to her customers. She wants a different schedule 
and description to appear when a customer clicks on a class, and we could 
even highlight a menu item by using context-specific graphics. 


All this adds up to an interactive web page. In programming terms, 
‘interactive’’ means that your page responds to specific events. And events 
are just things that happen. Those things can be triggered by the user, your 
code, the browser, or even a server: 


Cohiexj-sjgedi-Pig. yaphi^s 
•_s just a (aiuy 

a yaphi 亡 wheh -the 
^us-fcorwcv moves theiv- mouse 
ovcv* B rwChu option. 


lot CVChis iiscl-f. 



a 


c 




\\ 



J§_ —aUb —•abnl*—■ 

卜 

為 

-Mir 




..bu 七 W\W scr>d some 

cvci^*ts *to youv CoAt i-f 
ou vc sc*t uf handlers 
■tiiosc cvcr\*b- 




JavaScript 


Lots oi tilings trigger 
events, and you can 
register kanctlers in 
your code tkat respond 
to tkose events. 
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javascript events 


4 




+ 




The names of most events give you a pretty good idea what they do. 
Can you match the events to what they might be used for? 


onclfck 


onfocus 


onblur 


onbad 


onmouseoVer 


onmouseout 


Use me when you want to validate a form 
before its contents are processed by a server- 
side program. 

Use me when you want to provide audio 
feedback when a user has images disabled. 

Use me when you want to scroll in on a 
portion of an image when a user clicks a 
certain spot of the image. 

Use me when you want to let users know 
that increasing the width of the browser 
window could reduce their viewing 
experience. 

Use me when you want to hide a submenu 
when the user moves away from a menu item. 

Use me when you want to let a user know 
about the input format for a selected text field. 


onsubmit 


onresize 


onerror 


Use me when you want to change the color of 
a menu item when a user hovers over the item. 

Use me when you want to give the user 
popup instructions for a form before they 
start using the form. 

Use me when you want to validate a 
particular field every time data is entered 
into that field. 


you are here ► 


105 







event roundup 


♦ 




1 








The names of most events give you a pretty good idea what they do. 
Your job was to match the events to what they might be used for. 



You want to validate a form before its contents 
are processed by a server-side program. 

You want to provide audio feedback when an 
image can’t be loaded. 

You want to scroll in on a portion of an image 
when a user clicks a certain spot of the image. 

You want to let users know that increasing the 
width of the browser window could reduce 
their viewing experience. 

You want to hide a submenu when the 
user moves away from a menu item. 

You want to let a user know about the 
input format for a selected text field. 

You want to change the color of a menu 
item when a user hovers over the item. 

You want to give the user popup instructions 
for a form before they start using the form. 

You want to validate a particular field 
every time data is entered into that field. 


106 


Chapter 3 

















javascript events 


Connect evewts ow your web page to event 
handlers m your JavaScript 


You’ve already used the window. onload event to trigger lots of setup work 
on web pages, and the onclick event to handle users clicking on an image. 
We can use these events, as well as the onmouseover event, to connect 
different parts of Marcy’s yoga page to JavaScript functions we’ll write. 


TVic y/mdov/.cmload lets us set up a fay 
a ^d dss'i^ otVicr everrt idlers bcW t\\t 
user ke<\'ms y/ovkm^ W\i\\ tVic 



o^ouscovcv ^ 


usev moves mouse o 了 

somC^m^ on 3 l，kc 

dv\ 

f h . let S show a 

message hiht； whch 

move -thciir mouse ove^ ^ 
^lass \Cov\ oh the Ic-ft. 


AH these 

-Puh^-tiohS will g 0 
•… owr s^hcdulcjs 
Wipt... whi^h well 
s*ta\rt oh ih just a 
+CW pages. 




J hc Lhd：iohs yo U assi^h 
■to events av-c ^lled 
bahdlev-s. 
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initialize your events 


Use the wiwdow.owload event to initialize 
the rest of the interactivity ow a web page 


You’ve already used window. onload twice to initialize a page. We need to 
do the same thing in Marcy’s yoga page because... 


Because 

we want to keep our behavior and 
content separate, right? We don’t 
want our XHTML to have things like 
onclick="showTab()" / yeah? 


Assigning event handlers 
programmatically is one more way to 
separate content from behavior. 

Anytime you can keep your JavaScript separate 
from your XHTML, you should. The same goes for 
XHTML and CSS: keep them separate. 

The best way to assign event handlers is by using 
properties of the elements in your XHTML page, and 
doing that assignment in a function that runs before the 
user gets control of a page, window. onload is the 
perfect event for just that. 


there J are no 

Dumb Qv 



Questi9ns 


So when does window.onload get 
called again? 

Actually window.onload is an event. 
The event occurs, or fires, once the XHTML 
page has been read by the browser and all 
the files that XHTML references have been 
loaded. 

So when window.onload fires, 
the browser runs that event’s handler 
function? 

Exactly. 


How does the browser know what 
function to call? 

The browser will call the function that 
you assign to the onload property of 
the window object. You set that property 
just like any other JavaScript property: with 
an equals sign. Just be sure you leave any 
parentheses off the name of the function: 
window.onload = initPage; 


And we assign that property 
where? 

The browser will run any code that isn’t 
inside a function as soon as it encounters 
that code. So just put the window.onload 
assignment at the top of your JavaScript, 
outside of any function, and the assignment 
will happen before the user can interact with 
your page. 

Then, the browser will fire onload and run 
the function you just assigned. That’s your 
chance to set up the web page's other 
events. 
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javascript events 



JavaScript Magnets 


You need to initialize Marcy’s yoga page. Each left-side image and tab 
should display information about the rolled-over class. Additionally, 
clicking on a tab should select the class that’s clicked. See if you can use 
the magnets below to build initPageO, as well as placeholders for the other 
functions referenced. For now, the placeholders can just display alert boxes. 



H//VT ： Ov\c goes 

bc-fov-c ihi-tRagcO. 


^ for now, Marty just >wa^*b 
七 he *takkcd Ways ditkaklc. The 
images oy \ *tKc s'»dc should 

sKov/ d Wm 七 y/^cir\ user v-olls 

a mouse ovcv* lout *tV>cy 

sKould^t do else- 
























































































































magnet solutions 


m 


JavaScript Magnet Solution 

Using the steps on page 16 and what you’ve learned about how events work 
in JavaScript, can you re-create the initialization code for Marcy’s page? 




This kc sets the ihitPagcO -to 


Pern ’ 七 v/o^Y boo mu 乩 abou 七 tWis erne. Wll 
talk about all tV^csc yt&em ⑶七 methods ’m 
CV^aftcv-s ^ ^Y\d 



Loop ovc\r cvcv-y 
single <irng> 
dcnr»Cht, ahd 
events 

h> eddh. 


^c*t a b> *tV)C 

叫 h a ^ousc v-olls ov c ^ 

如 show a hihi.. 

...d^d Wide Kmt 
y/Key\ *tKc usev- mouses 
o-f-f o^* *tKc 


These events will happen when -the 
usc\r rwoves the mouse ovcv OhC o*f 
"the ^Uss 'thumbhdils ov- a -tab- 




pid Y ou 

-bo dlosc cvcvytWm5 - —^ 




TKese -fuy\t*t»oy\s C3y\ be 
dedared m a^Y order. You just 
v\ttd tV^c dc^lavatio^s -to avoid 
a JavaStv-'i\>*t cv-v-ov-. 

J 


Remembev- hot 
"to ihdludc the 
p^v-chtlicscs. You 
>waivt "to vc-fcv-ch^c 

■the -Puh^-tioh, hot 

V"Uh i*t. 

R — 叫 0 \ 

V>e 融 aWc. 
































javascript events 



Tesr DriVq 


Create schedulers, and add the functions shown on the last page. 
Don’t forget to assign initPage to the window.onload event, too. Then, 
test things out in your web browser. 

Roll your mouse over a tab. You should see an alert for showHint (), and then hideHint (). 
Try and click on a tab, too. Do you get a showTab () alert? What about clicking on an image 
on the left? Nothing should happen there right now. 


V pRGsmnsRS k 



MiH j .ipwj - _ I-r_l _ tf- 

CBift 'M. tda M dbpli，dkruHnridHiBh far Lki ■dv^liii 


Vuy.i itiT PruyE-irnmn'TS 

Ih* pa^a at h ILtp;// ^w^.h e j d fIrsllJLbSnCiQfn s-ays^ 
In shewMinrO 



ivttic V 、句 W 

alcvt bo^cs 

ww ⑽ s . 




Vuyj fur PrtMjB.immH'j'v 



Th« pafja at hItp;//^vw^.h« ji dfIrsll j 

In sKewTah(} 


slioy/H'ih'tO should \ruh y/liCh 
you mouse ovcir a -tab or av\ 

ir»>agc Oh the Ic-Pt. 


OK 





How do you like this user interface? Is there 
anything you would change? 


you are here 


111 































confusing web pages suck 



Look, you can say what you 
want, but I still think those images over on the 
left look like buttons. Navigation^ almost always 
on the left. Are we just going to ignore like a 
hundred years of web design? 


If a web page is confusing to YOU, it will 
almost certainly be confusing to your users. 

When you design and implement a site, you know how the 
site is supposed to act. If the site’s confusing to you, then 
users — without the benefit of the information you have — 
will probably be even more confused. 


Even when you don’t get to control the design of a site, like 
with Marcy’s yoga page, you should still try and make the 
site as unconfusing as possible. If that means turning some 
images into buttons to avoid users clicking on those images 
endlessly, then do it! 


TW»s haf 

从 at a 

Late … ， 7 0VA 一二 s 
仏⑽ we ? yroWcwS 

diocs^t ^ ^ waKc 


But isn’t that confusing, too? 
If the images are clickable, 
then you’ve got two forms of 
navigation ： tabs and images. 



O 


Sometimes you have to make a 
choice between okay and better. 

If you’re not in control of a site’s design, 
you’re often stuck making the best decisions 
based on an existing layout. With Marcy’s site, 
she liked the design with tabs and images. 

Your job, then, is to make the best decisions 
based on what you’ve got. In this case, that 
means two forms of navigation to avoid user- 
confusion. Otherwise, non-clickable images on 
the left might be construed as buttons. 
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javascript events 


Change those left-side images 
to be clickable 

It’s a piece of cake to make the images on the left- 
hand side of Marcy’s page clickable. In fact, all we 
need to do is remove code: 


function initPage() { 

var images = 

document.getElementByld( n schedulePane") 
for (var i=0; i<images.length; i++) { 

var currentImage = images[i]; 
currentImage•onmouseover = showHint; 
currentImage•onmouseout = hideHint; 

— (~ eurrQntImagQ . claGMlJaniL- -^Lab") 

currentlmage.onclick = showTab; 

士 、 ^ VCW ° VC 


getElementsByTagName( n img n ) 


i\\t tlosrn^ Watc- 


^ dor!i wah-t jus-t 
the -tabs {o be 

wc waht 

all i 州 ihdudihg 

"the Ic-rx—h^hd ohes, 
"to be dulkable. 




schedulers 


v^fmemsusk 

if_ CU,Uv — 

MSjim 


ifea-Miii uteii-h hri 



Tv-y >*t ou*t - cat 
should tall 

sKov/TdkO y\ov/. 



- *V- 


Good wefo images 
aren't confusing 


A good web page is as 
intuitive as possible. If 
something looks like a button, 
make it a button. And if part of a 
site is confusing to you, the web 
programmer, it’s probably even 
more confusing to a user. 
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xhtml is content and structure 


Use your XHTML's cowtewt awd structure 

showHint () is called when a user rolls their mouse over a tab or image. 
But how do we know which tab or image is being rolled over? For that, we 
need to take another look at Marcy’s XHTML: 


XHTML for page head and body... 

<div id= M schedulePane M > 

<img id="logo f, alt= n logo f, src= n images/logo . png" / > *,. , ,. 

<dlV ^=-nav ig ation-> 似 idJ^ies 

<img src= M imaaes /beajjnersBtn . pncr" alt="Beginners Yoga r 

title="beginners n class="nav" /> 

<img src= ， 'images/interm 穸 diateBtn .png" alt= n Intermediate Yoga' 
title= n intermediate" class= M nav"/> 

<img src= M imaaes / advancedBtn.pna" alt="Advanced Yoga' 

title= M advanced" class="nav M / > 

</div> 


<img 

src= ▼▼: 

<img 

src= ▼▼: 

<img 

src= ▼▼: 


title 

<img 

src= ▼▼: 

</div> 




T\\t tab use 

same titles. 


<div id= M tabs M > 

<img src= n images/welcomeTabActive.png" title= n welcome"/class= n tab n / > 
<img src=’ ， images/beginnersTabInactive • png ▼’ title= n beqinners M class= M tab 
<img src="images/intermediateTablnactive•png" 

intermediate n class="tab" /> 

'title= 


images/adv\ncedTabInactive•png 


class: 




Every XHTML element is accessible w your 
JavaScript code as m object 


classes.html 


You’ve been using getElementByld () to access the images in 
Marcy’s XHTML page. That works because each element in the 
XHTML is represented by the browser as an object you can manipulate 
in your JavaScript. 

Even better, all the attributes on an element are stored as properties on 
the JavaScript object that represents that element. Since Marcy’s images 
have titles, we can use those titles to figure out which image or tab was 
selected and show the right hint. 
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javascript events 



rpen your pencil 


showHintO should display a short hint-style message about each class when a user 
rolls their mouse over an image. But the hint should only appear if the welcome 
tab is selected; if one of the classes is selected, hints are disabled. Your job is to 
complete the code for showHintO that’s started below. 


var welcomePaneShowing 


function showHint() { 

-a-lcrt ( M in shewHint () M )-f 


TK'is *»S a global variable ： |七 s outside 
WWs. I 七 s “ ld iKc 

y/cltomc sUv/nr^, is iKc ov\ 7 

七 “e we 曲七 *to sKo>w Wnrrb. 


if 


return 


switch (this. 


case 


var hintText = "Just getting started? Come join us 
break; 


case 


var 

break, 


Take your flexibility to the next level 


case 


var hintText = 

"Perfectly join your body and mind with these intensive workouts 


var 


Click a tab to display the course schedule for the class 


var contentPane 


.innerHTML = "<h3>" 


content") 
+ n </h3>" 
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complete showHint() 


^Sharpen your pencil 

Solution 


Your job was to complete the showHint function to display a hint 
based on the title of the image. 


var welcomePaneShowing =• true 

^ pay loads, 

f 扣 c is siiova'm^. So y/c s*bav*b ou*t 
v/rbh *bW»s set *to tv-uc- 


function showHint () { 

-a-lort ( M in shewHint () M )-f 



if 


y/ejcomePaheShowihg 


return; 




l-P V/cVc |r>o-t OV\ "the 

wckomc page, dor /七 d 
Jus-t \rctuv-h. 


i his is 


w *this” \rc-Pcv-s *to whatevcv objedt 

called this That's the u titlc w is -the aUnbu-tc of the 

imajc that the usev rolled over. yMT/V\L page we wa^-t-to 

、 so w \i with the Uitl/ 
. P'ropev-ty o-P -the i—e. 


switch (this. title 


case n bcgiwwers n ： 

var hintText = "Just getting started? Come join us!"; 


break, 





'Perfectly join your body and mind with these intensive workouts .’，； 

break:. 


/t S always good ^ havc , ^ 

. r:s 之 tr e — wst be 

var hiwtText ="Click a tab to display the course schedule for the class 


default 



a 


var contentPane = grtElemehtPYld 
CQWtCWtPahG.. .innerHTML = n <h3> n 


hiwtText 


("contents - W' s ^ ^ ^ 

+ ”</h3 >”； 60 ^t f 

sV^o>M *tv>c Wmt - 
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javascript events 


Add the code for hideHiwtO, too 

The code for hideHint () is simple once showHint () is done. You just 
need to grab the content pane, and set the hint text back to the default: 


T ， ，S / 4of showWihtO 


function hideHint() { 

alert ( M in hideHint () M ) ； , _ u 

if (welcomePaneShowing) { io dc-Paul-t message. ^ 

var contentPane = document•getElementByld("content") 
contentPane.innerHTML = 

"<h3>Click a tab to display the course schedule for the class</h3>' 





schedule.js 


Tesr DriVq 


Update schedule.js. Add a welcomePaneShowing variable, and update 
the showHint() and hideHint() functions. Then try everything out. 


耆 




/Wousc ov C ^ a tab OV^ image or> -the 
leH … you should see a helpful iip 
appcair ih -the maih dohtch-t pahe. 
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the web is visual 


Tabs: an optical (and graphical) illusion 


Marcy likes the look and feel of tabs on her yoga page. While there are 
lots of fancy toolkits that let you create tabs, a simple graphical trick is all 
we need. 



On the yoga page, we’ve got a main content pane that’s dark green. So 
that color basically becomes the “active” color. The Welcome tab starts 
out that color, and the other tabs are a lighter color, the “inactive” color: 


These -tabs ih^tivc.. 


The Welcome 
•tab is active: 
i*t’s a dav-kcv 
dolov. 




bvuFrirwnf 


inLuTrnuiiidlu 




Click a tab to dtspliy tbe course schedule for tbe selected dass 


The active tolov ma*t^V)Cs *tV^c tolov- of 
七 md'rn Cov\itY\i faw. 


To make a tab active, we heed to change the 
tab's background to the "active" color 


All we need to do to make a different tab active is change it to 
the active color. Then, we can make the old active tab inactive by 
changing it to the inactive color. 

So suppose we’ve got two graphics for each tab: one with the tab 
against an active background, and another with the tab against an 
inactive background: 


TW»s \s 


beginners 



Inactive 


beginners 


Active 


WtYts the 
sdme iab ih dh 
active vemsioh. 


We’ve already got a showTab () function. So the 
first thing that function should do is change the tab 
image for the clicked-on tab. 





cuc^ 



Inactive 



beginners 
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Active 













javascript events 


Use a for... loop to cycle through the images 

You’ve already used the title property of the image objects in showHint () to 
change the hint text. We need to do something similar in showTab () : figure out 
which tab should be active, and change that tab to the active image. For all the other 
tabs, we just want the inactive image. 

function showTab() { 

alert ( "in showTab ()''); 

var selectedTab = this.title; 


var images = document•getElementByld( n tabs n )•getElementsByTagName( n img n ); 
for (var i=0; i<images.length; i++) { 

var currentlmage = images[i]; 
if (currentlmage•title == selectedTab) { 

currentlmage•src = "images/" + currentlmage•title + "Top.png"; 

} else { 

currentlmage•src = "images/" + currentlmage•title + "Down.png"; 



Youre kidding, right? What 
happened to all that business about 
separating behavior from presentation? 


This event handler has a LOT of 
presentation-specific details. 

showTab () now works directly with 
image names, and it actually builds those 
image names dynamically! So not only does 
showTab () mix behavior with presentation 
(the images), but it actually is depending on 
the content of the XHTML page — the title of 
each image — to figure out what presentation 
to use. 

There’s a real problem here. But what would 
you do to fix the problem? Think about how 
you would separate content, presentation, and 
behavior before you turn the page. 
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css is presentation 


CSS classes are the key (again) 


Marcy likes the look and feel of tabs on her yoga page. While there are 
lots of fancy toolkits that let you create tabs, a simple graphical trick is all 
we need. 

For each tab, there are two possible states: active, which is the darker 
color that matches the content pane, and inactive, which is the lighter, 
unselected color. So we can build two CSS classes for each tab: one active, 
and one inactive. 


Open up yoga . css in your app’s css/ directory, and add these lines: 



TKcv-c 
av-c *bwo 
dlasses 

lab. 



#tabs a#welcome . active { — tab has dh active dbss with -the active i 

background : url ( ' . ./images/welcomeTabActive.png') no-repeat; 




#tabs a#welcome.inactive 
background : url('../images 




/we*: 


^neTablnactive•png') no-repeat; 

tlass mattwc lab ^a 3 c. 


#tabs a#beginners.active { 

background : url ( ' . ./images/beginnersTabActive.png') no-repeat; 

} 

#tabs a#beginners.inactive { 

background : url ( ' . •/images/beginnersTablnactive•png') no-repeat; 

} 

#tabs a#intermediate.active { 

background : url ( * . . / images/intermediateTabActive.png') no-repeat; 

#tabs a#intermediate.inactive { 

background : url ( ' . •/images/intermediateTablnactive•png') no-repeat; This CSS^ h 

9° 5^ywhc\rc ih 


#tabs a#advanced.active { 

background : url ( * . ./images/advancedTabActive.png *) no-repeat; 

} 

#tabs a#advanced.inactive { 

background : url ( 1 . •/images/advancedTablnactive•png') no-repeat; 


yo^a.css. H J S 
U P io you^ 




#tabs{ 
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yoga.css 








javascript events 


Ummm... but the tabs aren't Vs! 

Did you notice what element the CSS is styling? #tab indicates a <div> 
with an id of “tab.” That’s okay. But then, the CSS indicates it’s styling <a> 
tags, with ids of “welcome,” “beginners，” and so on. That doesn’t match 
Marcy’s XHTML page at all. 

But that’s no big deal... we can change all the images on the XHTML page 
to <a> tags to separate one more layer of content from presentation. 


*tak 

is y\ov/ 

by a 妁 <a> 



XHTML for page head, body, and schedulePane <div>. . . ^ ^ 

The clcmchts s-till have a *tabs ave 

av-c 


<div id= M tabs M > t'-tlc ahd ah id. 

- V 

<a id= n welcome" title="we1come" class="active M ,href= M # M >Welcome</a> 

<a id="beginners" title= M beginners M class= M inactive" href= n # M >Beginners</a> 
<a id= n intermediate” title="intermediate" class="inactive" 
hr e f ='▼ #'▼ >1 n te rmedi a te< / a> 

<a id= n advanced" title="advanced" class="inactive" href= M # n >Advanced< / a> 


Tlmy~~ oiL— n imcLgcG/ v^olcomoTabActivo . pnep 1 — tith 


"Wtil^UILLti "~~" Ldlj"~~/ > 

—img arc— ,J imagos/boginnorsTabIncLCtivc . png M ― titlc -n ] j iy 丄 m i ei b ~° ― Glaas*- M tab M ~ 
T • 丄 mg jrc— n imcLgco/intcrmcdia i bcTabIriacLiue.pny n ' 

intermediate M ulLdb T 1 ~7^ 


ji u n lmcLyes/cLL^d 丄丄 uedTcdjT 丄丄 duL 丄 ve . png n titlc~- n ad T u T emccd n ~~ clascj~ M tab' 

</diV> rLovc iKc d*»vc^ to Wajcs m )< 議 U 



thereiare no 

Dumb Questi 


9ns 


classes.html 


Why is the href set to 

# references the current page. We don’t want the tabs to 
take the user anywhere else, although later we'll write code so that 
clicking on a tab shows the selected class’s schedule. 

If we’re not taking the user anywhere, why use <a> 
elements? 


Because the tabs are ultimately links. They link to each class 
schedule, even if it's in a slightly non-traditional way. So the best 
XHTML element for a link is <a>. 

On the other hand, there are usually at least two or three ways to 
do something on the Web. You could use a <span> element, a 
<div>, or even an image map. It's really up to you. As long as you 
can attach event handlers to the element, you’re good to go. 
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javascript is behavior 


This broke our JavaScript, too, didn't it? 


We’ve got a nice, clean XHTML page and some CSS that truly controls 
the presentation of the page. But now all that JavaScript that depended 
on <img> elements isn’t going to work. That’s okay, though, because even 
though it worked before, it mixed images in with behavior... a real problem. 

Let’s fix up our script, and separate all that presentation from the behavior 
of the yoga page. 


window.onload = initPage; 
var welcomePaneShowing = true; 


Wic *tabs <dW>, 

av\A ovcv 


<a> cleric 灼 *ts. 

function initPage() { 


^ h ccd d hew blo<ik 
^ b ^usc 

饮 lr ^ 3 « woh^t get 

the -tabs... thcyVc how 
<5> clcrtnChis. 


var tabs = 

document.getElementByld( n tabs").getElementsByTagName("a n ); 
for (var i=0; i<tabs•length; i++) { 

var currentTab = tabs[i]; 
currentTab.onmouseover = showHint 
currentTab.onmouseout = hideHint; 
currentTab.onclick = showTab; __ 

} 

var images = 


丁 his isn’t rwudh dideveirt... 
the cvehis dhd hdhdle^s 
-the same as Y/hcr\ the 
■tabs images. 




document•getElementByld( n schedulePane").getElementsByTagName("img M ); 


for (var i=0; i<images.length; i++) { 

var currentlmage = images[i]; 
currentlmage•onmouseover = showHint 
currentlmage•onmouseout = hideHint; 
currentlmage•onclick = showTab; 



TW.S 6odc looks aMly ^ io 
ihc 6ode above, a^d ^ already 
払 a 七 related be 

veal Rouble \A/c r^ttd 
•to dome ba 汰 laW- 


function showHint() { 

// showHint() stays the same 

} 

function hideHint() { 

// hideHint() stays the same 
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javascript events 


function showTab() { 

var selectedTab = this.title; 

var tabs = document .getElementById( n tabs 
for (var i=0; i<tabs•length; i++) { 

var currentTab = tabs[i]; 
if (currentTab.title == selectedTab) 
currentTab.className = 'active'; 


TW»s \s same lo ^ 

: f 心 r 工 . 



getElementsByTagName( 


else { 

currentTab. className 


=* inactive 


广， 一 • "ow we 

oui C££ 

dass «. 




Tqst DriVQ 



schedulers 


You’ve got a lot of changes to make. Update classes.html ， yoga.css ， 
and schedulers. Then，see if those tabs work... try clicking on each. 



丁 sclera {^0 Aould 


...and -the oihev- tabs 
should become 
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separate your layers 



Wow, so it takes a lot of work 
to separate content from presentation and 
behavior, especially if you doiVt do things that 
way from the beginning. 


The earlier you separate your content from 
your presentation and behavior，the easier 
that separation will be. 

With Marcy’s site, we didn’t really think about content or 
presentation early on, and it’s only when we were a few 
functions into our behavior (the JavaScript) that we saw 
problems. If we’d planned from the start to keep images out 
of our code, and let our CSS handle all the presentation, 
we’d have fewer changes to make to our JavaScript. 

Still, even if you find problems late in the process, it’s almost 
always better to do the work to really separate out content, 
presentation, and behavior. Your app will be a lot better for 
the work you put into it. 



Dumb Quest! 


ons 


So should I never have images in 
my XHTML? That’s basically what we did 
with the tabs, right? Pulled the <img> 
elements out of the XHTML? 

A- 

r \* That was part of it. But more 
importantly, we used CSS to control whether 
or not a button was active. What a button 
looks like when it changes from active to 
inactive is presentation, so that belongs in 
the CSS. 

It’s okay to have images in your XHTML; 
just make sure that if those images are tied 
to behavior, you get your CSS and code 
involved, and keep those details out of your 
XHTML. 
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That CSS confused me. What does 
tJ #tabs a#advanced.inactive" mean? 

The # sign indicates an id. So 
#tabs means “anything with an id of 
‘tabs’.” In the XHTML, that’s the <div> 
with an id of “tabs.” 

Then, a#advanced means “for an <a> 
element with an id of ‘advanced? So that’s 
the <a> element with an id of “advanced” 
nested within a <div> with an id of “tabs.” 

And finally, the 11 ." indicates a class. So 
a#advanced. inactive means the 
<a> element with an id of “tabs” and a class 
name of “advanced”（all under a <div> 
with an id of “tabs”). That’s a mouthful, so if 
you’re still unsure about the CSS, you might 
want to pick up a copy of Head First HTML 
with CSS & XHTML to help you out. 


Q/ Isn’t it sort of weird that all the 
buttons on the left are images, but all the 
tabs are <a> elements? Why aren’t we 
using <a> elements for the buttons, too? 

Good question. Well come back to 
that, but anytime you notice things that seem 
out of place, jot down a note to yourself. It 
might be something worth looking at in more 
detail. 

When I click a button on the left, 
the tab also changes. Is that right? 

What do you think? When you select 
the “advanced” button, do you think the 
“advanced” tab should become active? 








javascript events 


^hdrpen your pencil 

~ Wp’\/p nnttpn ^ 


We’ve gotten a lot done, but showTabO is still incomplete. We’ve 
got to show the schedule for a selected class when a tab is 
clicked on. Assume the schedule is an HTML description and a 
table that shows the days of the week that the selected class is 
available. There will also probably be an "Enroll button.” 


How should we store the details and schedule for each class? In an HTML file? In the 
JavaScript? Why did you choose the format you did?. 


How would you replace the main content pane with the schedule and details for a 
selected class? 


Does your solution: 


Separate the content of your page from its presentation? 


Separate the content of your page from its behavior? 


Separate the behavior of your page from its presentation? 


Ajax is all about 

IVTERACTIOV, Your p 俨 

can interact witk server-side 
programs, elements witkin 
itself，and even otker pages. 
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ajax can request xhtml pages 


Well, the first parfs easy. If the 
schedule and description is HTML, we 
should store that as an HTML page. 


0 


o 



Jill ： You mean X-HTML, right? 

Joe: Well, yeah. 

Frank: As an entire page? That’s no good... we don’t want 
to recreate all the tabs and stuff for each class, do we? 

Joe: Well, then how about an XHTML fragment. Like, 
just the elements and text for the actual schedule and class 
description. 

Jill: Yeah, because there’s no way we want all that content 
in our JavaScript. And if we use XHTML, we can use the 
same CSS styles as in the main page. 

Frank: But how do we load up that... what? XHTML 
fragment — 

Joe: Sure. 


Frank: — okay, right. So how do we load it? 

Joe: Well, the tabs are <a> elements. Maybe we put 
the fragments in the href attributes instead of those # 
symbols? 


Frank: But that would replace the entire page. That’s no 
good. Besides, it seems sort of slow... 

Jill: Guys, what about using a request object? 

Joe: What do you mean? 


Jill ： What if we use a request object to get the XHTML 
fragment, and just set the content pane’s innerHTML to 
the returned page? 

Frank: Can you even do that? 

Jill: Why not? Instead of requesting a server-side program, 
we’ll just request the XHTML fragment we want. 

Joe: And we can do it asynchronously, so there’s no waiting 
or page refreshing! 
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javascript events 


Use a request object to fetch the class 
details from the server 

The server doesn’t need to do any processing for Marcy’s page, but we can 
still use a request object to grab the XHTML fragments for each class. This 
is a request to the server, but it’s just for a page rather than a program. Still, 
the details are the same as you’ve already seen. 

We’ll build the code the same way we always do, using the 

create Re qu est () function from utils . j s and a callback to display 

the results in the content pane. Here’s what we need: 


function showTab() { 

var selectedTab = this.title; — . 

// set each tab's CSS class 


TWis is i\\t pav-t o-f 
sKo>wTakO 七七 

You’ve alv-cadY wrtW 



schedulers 


var request = createRequest () ; £T ~This is -fchc sa^c ^ /. 

if (request==null) { ^ odc wc bcch usihg ^ ^|k ih 

alert ("Unable to create request") ; SCirv c\r—sidc p\rogv*ams 

return; 


iOh 



XKc shov/Sc^cdulc() 

^dllbd^k 

is called vjhcm *tV^c 
v-c<\ucs*t v-c*tuv-^s. 


request.onreadystatechange = showSchedule; 
request .open (’ 'GET, selectedTab + n .html n , true) 
request.send(null); 


a^d advav^cdAvW ， 


function showSchedule() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

document.getElementByld("content").innerHTML = 
request.responseText; 


Thc 刈 T 亂 i s available 

^spohscTcxi Wt csvi display 
the XWTML usmg -the ihhC^HT/WL 

of the 心 W 



Make these changes to schedule.js, and try out the 
improved web page. Is everything working? Are 
there any changes you’d make? 
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synchronize your asynchrony 


Pe careful whew you have two fuwetiows 
changing the same part of a web page 

There’s a bug! Glass schedules show up okay，but mousing over another tab 
or button image hides the class schedule and replaces the content pane with 
hint text. That doesn’t seem too intuitive... 


1，-- 〜.…一 

V ■ pmmms n 

-H 

h 一 3 _ r- 



The class schedule a^d 



Cl^kmOj d or tab 減 ks 

tlass stKcdulc is 
Sieved a^d a^ro^cd m*to 
wtcyrt paw. 


Bu-t thch ^ousih 0 ovcv* dl 

饮 tab ircpla^s thr^hcdulc 

with a Ut. Thai J s ^hi/ 



Make sure you have the class XHTML fragments. 

XHTML fragments for each class are included in the 
examples download from Head First Labs. Make sure 
they’re named beginner . html, intermediate . 
html, and advanced. html. They should be in the 
same directory as your main page, classes . html. 
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(parpen your pencil 

^ It's time to fi 


It’s time to finish up Marcy’s page. You need to change the JavaScript so that hints only 
show when the welcome tab is active. If a class is selected, no hints should appear. Mark 
up, cross out, and add to the code below to finish up schedule.js. To help you out, we’ve 
only shown the parts of the script that you need to change or add to, and parts that are 
relevant to those changes. Good luck! 


var welcomePaneShowing = true; 

function showHint() { 

if (!welcomePaneShowing) { 
return; 

} 

// code to show hints based on which tab is selected 

} 

function showTab() { 

var selectedTab = this.title; 

var tabs = document•getElementByld( n tabs n ).getElementsByTagName( n a n ); 
for (var i=0; i<tabs.length; i++) { 

var currentTab = tabs[i]; 
if (currentTab.title == selectedTab) { 
currentTab.className = 1 active'; 

} else { 

currentTab.className = 'inactive'; 

} 

} 

var request = createRequest(); 
if (request == null) { 

alert ("Unable to create request"); 
return; 

} 

request.onreadystatechange = showSchedule; 
request.open("GET", selectedTab + ".html M , true); 
request.send(null); 
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finish showTabQ 



Your job was to finish up the code so that tabs selected classes 
and turned off hints. Hints should only appear when the 
Welcome tab is active. 


var welcomePaneShowing = true; 


function showHint() { 

if (!welcomePaneShowing) 
return; 



?|f L iS ^ This Should 

' 今厂 ― s showing. If i^ s hot； wc 

doh t wah-t -to show a^y hih-ts. 

後、 t already 七 a cMtcV m ^ 

妊 c v/cl 加 c pc … so v/e just to 州 akc 

suvc -tV^is variable »s sc-t 七 I7. 


} 

// code to show hints based on which tab is selected 


function showTab() 
var selectedTab 


this.title 


TWis v-cally 
is a Wk … 
y/cVc 七七 m 3 

七 10 灼 


ttcvVs 佔 c _ todc. First v/c r^ccd sec ^ 

七 he selected tab »s Wt\cor,t tab. 

--L S ； 1 

if (sd^edtab « Vd—•) { 
welcomePaweShowihg 5 true; 
doc 刪 wt.gctEI 賺 wtPyld("cohiwt").i 晒 rHTML 

彡 9 - 9 Click a tab to display the course schedule for the class 0 Vh? 9J "; 

} else { 

welcomePaweShowiwg 5 false; 



You ^c*t koy\us £rcd 丨七 A Y ou 

tw»s out 1^ 

is sclented, v/c 竹 ced *to 

ovcv->wv->*tc a^Y …办 

{\\t y/cltow»c messay … 


•m ouv 
JavaSc.v'»p*b! 
You’ll lcav-y> a 
Y/ay *t° avoid 
七 Wis 

you yt •…* to 

i\\t VOM 

awd & 


欠 


// everything else stayed the same! 


anv ia\) is sclera, uyda 七 c 

c ltomcPa^oWm 3 t> +alsc； Nov/ 

,.o Wmts Y/.II sV^oy/ fectausc <A the 

s*ta*tcwcy\*b m sV>o>/H"nr\*tO. 


… othe\rwisA ihe v/cldomc pa^e 
will have a dass schedule, and 
it woh'-t cveh be dlcav- y/kidh 
dass is showih^/ 


v/ 

y\o 


thereiare no ^ 

- Dumb Questions - 

What if I didn’t catch the bit about changing the content pane back to the 
welcome message when the Welcome tab is selected? 

That’s okay. Make sure you add that code to your copy of schedulers, though. One 
way you can avoid missing things like that in the future is to always test your code. Load up 
the yoga class page, and click and move the mouse around... does anything look funny? If 
so, then make whatever changes you need to fix that problem. 
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Tesr DriVq 


Make sure you’ve got the XHTML fragments, the updated CSS, the 
clean XHTML class page (with no presentation!)，and your completed 
copy of schedulers. Load up Marcy’s web page，and give it a spin. 



Cl Wm 5 ^ 七仏 

St\tcb tlass s^cdulc 

ar\d 


' hih-b do^i 
U P "the ddss-s^ifi^ 




iiT»iml.t mi 




(lorii 4 IflUl# rifTwr Ifet wtrpiiilr fi^r Ifcr 'dm™ 


™ ； FtEj^U 


V ir r ^a i. , ^m.'EaJi , nfaM n&ril:wang , ' ||, i m asca 


ft 






tjstshtmt 

IliiJhi. uriarrfcl BWiriiHi I pirnT nmrlm ■ 










Ifs perfect! Wow, ifs just 
like the drawing you did. 
Fantastic! But I did have 
just one more idea... 


^nu i - 








































clients always have one more idea 



I have more images of the different 
yoga classes. Wouldn’t it be cool if when you 
moused over one of those left-hand images, the 
image changed? 


Marcy wants the images on the left 
to change when users roll their mouse 
over the image 

It’s too bad Marcy didn’t let us know about this 
earlier, but this still shouldn’t be too hard. So when 
the page loads, the images should look one way, but 
each time a user rolls their mouse over the button, 
the image should change. 



Alousc 


〆 


ovc\r 




Rmm 



r 





\o\\s 


vaSCV 


vt 


Alousc 



attwc vevs 多 


OVCV- 


Alousc 


ovc\r 
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Whew you need to change images in your 
script thiwk "chawgc CSS classes" instead 


Here’s another case where separation of presentation and behavior can be a big 
issue. Before changing any code, think, “Is this a case where I’m going to have 
to mix my behavior (my code) and my presentation (like images)?’’ 

If it is, it’s time to restructure some things. The image buttons are really just like 
the tabs. They just look like buttons instead of tabs. So let’s add some new CSS 
classes for both button states: the normal button and the active button. 


^navigation a { 

display : block; float : left; 
height : 0; margin : 0 0 1Opx 0; 
overflow : hidden; padding : 14Opx 000; 
width : 155px; z-index: 200; 


Tbc vulcs a ㈣ 7 k , 七 ^ 
“die 




^navigation a#beginners { AzT 

background : url ( ' ../images/beginnersBtn.png') no-repeat; 


By dc-fault, but^fcohs use 

OhC 

...dv\d a Wtto 灼 

*,s a^-tWc, \i uses a 
七 Way* 


^navigation a#beginners.active { 

丨 url (’.. /im “_—. png i) n — 

^navigation a#intermediate { 

background : url ( ' ../images/intermediateBtn.png') no-repeat; 

} 

^navigation a#intermediate.active { 

background : url('.. / images/intermediateBtnActive.png') no-repeat; 

} 

^navigation a#advanced { 

background : url ( 1 ../images/advancedBtn.png *) no-repeat; 

} 

^navigation a#advanced.active { 

background : url ( * ../images/advancedBtnActive.png *) no-repeat; 


#tabs{ 


classes 


Jus*t 1'kc *tV^c 

{\, t -tabs, 5 ° 扣 


yoga.css 


m Y ou，r 


CS£. 
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use the right elements 

Links in XHTML arc represented by 
<a> elements 

Here’s another place where we can make some improvements to our 
XHTML. Currently, the images are represented by <img> tags, but 
they really are functioning as linking buttons: you can click on one to 
get a class schedule. 

Let’s change each button to an <a>, which better represents 
something you can click on to get to a different destination, in this 
case a class schedule and description. 


XHTML for page head, body, etc ... 

^ ^ sumc use tk Hght ids titles 

<div id= M navigation"> 

<a id= "beginners’’ title= n beginners n href = M # n >Beginners</a> 

<a id="intermediate" title="intermediate" href= n # M >Intermediate</a> 
<a id="advanced" title="advanced" href= M # M >Advanced< / a> 

-4img arc "mages/begirinei'^Dtn .png'-~~alt = M Bpgi nnpi^s~Yoga-' 
tit 1 e= M b e g i rmer-g- 1 - 1 ― cla55- l, riciv7~ w ~~ 

/ i ^ png M 3 l — = —Qr'mQHd a —q V 门 ga 




Tmg oro~ 

'Li Ll^- 11 ill Lei mediate 1, ~lcLbb- M iicL^ 1 


prig M ~ e r lt-W 小门 nr n ri Yngn 
Li Lle- M cid'vdnC^d M ~~(JlcLdbi- "nav M /> 

</div> 


TWis it%i v/'»H 
tovcvcd up 七 ^ 

button 



classes.html 


ihere^ciVe no ^ 

Dumb Questions 


Q/ With the tabs, we had an inactive class and an 
active class. But on the buttons, they’re in the XHTML 
without a class, and then there’s a CSS “active” class 
description with the active image. Why don’t we have 
an inactive CSS class with these buttons, too? 


Good question. With the tabs, there were two 
distinct states: active (in the forefront) and inactive (in 
the background). The buttons we have, though, really 
have a normal state, where they sit flat, and an active 
state, where the button is highlighted. So it seemed 
more accurate to have a button (with no class), and then 
assign that button the “active” class when it's rolled over. 
Uniformity is a good thing, though, so you could probably 
use inactive and active classes if you felt strongly about it. 
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Wc need a fuwctiow to show an active 
buttow and hide a buttow, too 


Before we change any of schedule.js, let’s add two functions we know 
we’ll need. First, we need a buttonOver () function to show the 
active image for a button. That’s just a matter of changing a CSS class: 

function buttonOver() { 

this .className = "active"; 七 ^ m0US c is ovcv- 

} ~a button, 

We can do just the opposite for when a user’s mouse rolls out of the 
button’s area. We just need to change back to the default state, which 
is no CSS class: 

Weh the mouse Volls out 

function buttonOut () { ^ a bu-t-toh ； go ba^k io 

this.className =""; dc-fault siaie. 

} 

Whew you initialize the page, you need to 
assign the new event handlers 

Now we need to assign the new functions to the right 
events. buttonOver () should get assigned to a 
button’s onmouseover event, and buttonOut () gets 
assigned to a button’s onmouseout event. 


In JavaScript, 

an element is 
represented ty an 
otject. Tkat otject 
kas a property lor 
eacli event tkat 
can occur on tke 
element tkat it 


represent 


s. 


We can also update the code to use the new <a> 
elements that represent buttons instead of the older 
<img> elements. 

function initPage () { 

// code to deal with tabs 


㈣ 
^avigatioh <div>. 


Wic’ve 

Aa 呼 d 七 he 
array 七七 
… as tailed 
*to 

be called 

buttons. 


4 > var buttons = 

document.getElementByld( "navigation") .getElementsByTagName( M a M ) 
for (var i=0;_ i <buttons .length; i++) { 

var currentBtn = buttons [i]; 
currerTtBtn . onmouseover — showHint; 
currentBtn .onmouseout = hideHint ; 
currentBtn .onclick = showTab; 


currentBtn.onmouseover = buttonOver 
currentBtn.onmouseout = buttonOut; 



Wert avc ou\r ^ ^a^dlcvs. 
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test drive 




(thq piml) Tqst DriVq 


Everything should work! Make all the changes from the last few pages 
to your XHTML, CSS, and JavaScript, and let’s impress Marcy with her 
stunning new interactive class schedule page. 



Roll ovc\T a ^ 7 0U 

should a^ We ve^oy. 

…狀 a … iway. " 
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0 



Not so fast... have you tried out the 
page? The images change, but what happened 
to all those helpful hints when you mouse over 
the buttons? Theyre gone! 


Wkat kappenect to tke kints tkat were 
attacked to tke button’s onmouseover 
and onitiouseout events? 


Wkat would YOU cto to make sure tkat 
Many’s customers get cool interactive 
tuttons AND kelpful kints? 

Wken you’ve got an idea，turn over to 
CWpter 4 , and let’s see kow to take 
your event kanclling skills to tke next 
level (literally). 
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4 multiple eVent handlers 





I was lost before you 
came along. I mean, I’m great 
at onclick, but without a little 
validation from you, I just wouldn’t 
be that sure of myself. 


Two^s company ♦ 


A single event handler isn’t always enough. 

Sometimes you’ve got more than one event handler that needs to be called by an 
event. Maybe you’ve got some event-specific actions, as well as some generic 
code, and stuffing everything into a single event handler function won’t cut it. Or 
maybe you’re just trying to build clean, reusable code, and you’ve got two bits of 
functionality triggered by the same event. Fortunately, we can use some DOM 
Level 2 methods to assign multiple handler functions to a single event. 


this is a new chapter 


139 




events are properties 


An event can have only one cvcwt 
handler attached to it (or so it seems) 

Marcy’s page has a problem. We’ve assigned two event handlers to 
the onmouseover property of her image buttons: 


function initPage() { 

// code to deal with tabs 


var buttons = 

document.getElementByld("navigation") .getElementsByTagName("a M ); 
for (var i=0; i<buttons.length; i++) 
var currentBtn = buttons[i]; 

currentBtn.onmouseover = showHint; 

currentBtn.onmouseout = hideHint; 


之一 ^ is "the cvcht ： onmouseover 
•fov* duinrCh-tBth. But wcVc assiah'ma 
both the shoy/ttihtO liahdlev^... 


currentBtn.onclick = showTab; 

currentBtn. onmouseover = buttonOver; 

currentBtn.onmouseout = buttonOut; 


...ar^d bu*t*to^OvcvO i^a^dlcv-. 


Only the LAST event handler assigned gets rw 

When you assign two event handlers to the same event, only the last 
event handler that’s assigned gets run. So on Marcy’s page, mousing 
over a button triggers onmouseover. Then, that event runs the last 
handler assigned to it: buttonOver (). 



"flic is y/hch you voll 

<> v c\r a button, so but-fcohOvcv-O is 
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Wm*t a 个 0 代 . 


sV^ovi 















multiple event handlers 


Evcwt handlers are just properties 

When you assign an event handler to an event on an XHTML element, 
the handler becomes a property of the element, just like the id or title 
properties of an <a> element: 



XHTML file 



<a> object v^as \d, 

■title, an Wc-f, a^d ^ onmouscovcr. 

has a 於 a 灼 d a value. 


JavaScript file 


A property caw have only ONE value 

If you assign a value to a property, that property has that single value. So 
what happens when you assign another value to that property? The property 
then has the new value, and the old value is gone.. 


JavaScript file 


piv-s*t, *bV^c onmouscovcv- 
pv-opev-by »s assiyed , 



Thch, -the ohnDouseove^ 
P^ropcirty is assig hCC | a 

hCw 抑1叱， 'luUo^Ovc^ 


<a> element 


TV^c value w bu*b*to^0vcv 
vcjlatcs i\\t old vak 

you are here 
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addEventListenerQ registers an event handler 


Assign multiple evewt handlers with 
addEvewtListewcrO 

So far, we’ve been adding event handlers to elements by setting the event 
property directly. That’s called the DOM Level 0 model. DOM stands 
for the Document Object Model, and it’s how elements on a web 
page get turned into objects our JavaScript code can work with. 

But DOM Level 0 isn’t cutting it anymore. We need a way to assign 
more than one handler to an event, which means we can’t just assign 
a handler to an event property. That’s where DOM Level 2 comes in. 
DOM Level 2 gives us a new method, called addEventListener (), 
that lets us assign more than one event handler to an event. 

Here’s what the addEventListener () method looks like: 



° h ，h 




currentBtn.addEventListener("mouseover n , showHint, false) 

户 

ttevVs w\C*b^od- 

>u 已 all 七 

xti\\od oy\ element 
you lldve objcd*b 
V-CfV-CSCir\*ba*bioir\ 


Tiic sedond av^umc^*t is 

iiar>dlev. Tiiis should be a 
m youv- sdvipt ov you 
ddr\ dcdlav-c mime. 


/jhovc th 
士 oir how. 



currentBtn.addEventListener("mouseover", buttonOver, false); 


t 

V Add a stCov\A V^av\dlcv-, 

aaatvc^uswo, a^a 

bo 从 V^av^dlcv-s ^\W yk called 
s^tt\Ud ⑽七 . 



In what order do you think the browser will call 
your handlers? Do you think the ordering in 
which the handlers are run will affect how you 
write your code? 
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multiple event handlers 




DOM? What’s that? 


DOM stands for the Document Object 
Model. It's a specification that defines how 
the parts of a web page, like elements and 
attributes, can be represented as objects 
that your code can work with. 




And what does Level 0 mean? 


Level 0 was actually an interpretation 
of the DOM published before the DOM was 
formalized. So it works with the DOM but 
isn’t really part of it. 

For your purposes, though, DOM Level 
0 is what your browser uses to come up 
with basic objects and properties for each 
element in a web page. When you assign a 
handler to an element's onmouseover 
property, you’re using DOM Level 0. 

What about DOM Level 1? Do I 
need to worry about that? 

Not right now. DOM Level 1 has to do 
with how you move around in a document. 
So DOM Level 1 lets you find the parent of 
an element, or its second child. We’ll look at 
DOM navigation quite a bit in Chapter 6. 


tJiereiare no 。 

Dumb Questi9ns 

And addEventListener() is part of 
DOM Level 2? 

Exactly. DOM Level 2 added a lot of 
specifics about how events should work and 
dealt with some XML issues that aren’t a 
problem for us right now. 

So I can use addEventListener() to 
add multiple events, and it will work with 
all the browsers? 

As long as they support DOM Level 2. 
But there’s one major browser that doesn't 
support DOM Level 2 … well look at that in 
just a minute. 

Couldn’t I just assign an array to 
an event property, and give the property 
multiple values that way? 


A ： 


Right now, though, you don’t really need 
to worry too much about what level of the 
DOM you're using, except to make sure 
your browser supports that level. All major 

browsers support DOM Level 0 and Level 1, addEventListener()? 
which is why you can assign event handlers 
programmatically using event properties like 

onclick and onmouseover. 


That’s a good idea, but it's the browser 
that connects events to event handlers. If 
you assigned an array of handler names to 
an event property, the web browser wouldn't 
know what to do with that array. 

That’s why DOM Level 2 was put into place: 
it provides a standard way for browsers 
to deal with multiple events. Ideally, 
specifications standardize a process and 
remove any possible guesswork. 


Why are the event property names 
different than the names you pass to 


That’s another great question. That’s 
just the way the authors of the DOM 
decided to handle event names. So if 
you're assigning an event property, use 

onclick or onmouseover. With 
addEventListener (), use 
click and mouseover. 


What’s that last parameter you’re 
sending to addEventListener()? And why 
are you setting it to false? 

That last parameter indicates whether 
you want event bubbling (false) or 
capturing (true). We’ll talk more about 
capturing and bubbling in a bit, so don’t 
worry about this too much. For now, always 
pass false to addEventListener (), 
which indicates you want event bubbling. 


You can assign as 
many kanctlers 
as you want to 
an event using 
adctEventListenerO* 


adctEventListenerO 
works in any wet 
browser tkat 

supports DOM 
Level 2. 


you are here ► 
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firefox and safari are dom level 2 browsers 


Your objects caw have multiple evcwt handlers 
assigned to a single event m POM Level 1 

The most important thing that DOM Level 2 added to events is the ability for 
an event to have more than one handler registered. You’ve already seen how 
addEventListener () adds a handler to an event: 




The browser runs every handler for aw event when 
that event is triggered 


When an event is triggered by a mouse movement, the browser looks 
up the right event. Then, the browser runs every event handler function 
registered to that event: 




Event listeners 
aren’t called in 
any particular 
order. 


You might think 
that the browser calls the 
event handlers in the order 
they’re added, but that’s not 
guaranteed. Make sure that 
your handlers don’t depend on 
the order in which they’re called. 


JavaScript file 
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multiple event handlers 


It’s time to make some improvements to Marcy’s yoga page. Below is 
the current code for initPage(). Your job is to cross out anything that 
shouldn’t be in the code, and make any additions you think you need 
to get the image button mouse events to work. 


function initPage() { 

var tabs — 

document.getElementByld("tabs").getElementsByTagName("a"); 
for (var i=0; i<tabs.length; i++) { 

var currentTab = tabs[i]; 
currentTab.onmouseover = showHint; 
currentTab.onmouseout = hideHint; 
currentTab.onclick = showTab; 

} 

var buttons = 

document.getElementByld("navigation") .getElementsByTagName( n a"); 
for (var i=0; i<buttons.length; i++) { 

var currentBtn = buttons[i]; 
currentBtn.onmouseover = showHint; 
currentBtn.onmouseout = hideHint; 
currentBtn.onclick = showTab; 
currentBtn.onmouseover = buttonOver; 
currentBtn.onmouseout = buttonOut; 




schedulers 


嘴，「 pen. 















register multiple handlers with dom level 2 

c^Jharpen your pencil 

Solution 


Your job was to cross out anything that shouldn’t be in the code, 
and make any additions you thought you’d need to get the image 
button mouse events to work 


function initPage() 


var tabs 


document.getElementByld("tabs").getElementsByTagName("a"); 


for (var i=0; i<tabs.length; i++) 


var currentTab = tabs[i]; 


currentTab.onmouseover = showHint 


currentTab.onmouseout = hideHint 


currentTab.onclick = showTab 


Y® u ^ld have these io 

addEvchtLis-tchCirO, but 
pally ho \reasoh "to. They v/o\rk 
as they av-c. 


var buttons = 

document.getElementByld("navigation").getElementsByTagName("a"); 


for (var i=0; i<buttons.length; i++) 


var currentBtn = buttons[i]; 



schedulers 


-»howIIint; / 


currehtPth.addEvehtListcwer( ,, mouseover ,, / fake); 

currehtPth.addEvehtListeher( ,, mouseout ,, / hideHiwt false); 

currentBtn.onclick = showTab; 


Rcmcrwbcv, 七 he cvcr^i 
av*c the same ； bu*t v/i"thou*t 

七 he」'。/ bc-Povc -the 好。 从 i\\t mouscovcv a^d 

) w ouscou*b events 
V^a^dlcv-s eadVv 


currcriLDLii. unmuiibcovGr 「 buttonOver; 

currehtPth.addEvehtListeher( ,, mouseover ,, / buttowOver, false); 

■ currentBtn . cm 動 usGOut — buttonOut ; 

currehtPtw.addEvehtListewer( ,, mouseoat ,, / buttowOot false); 


Ksc -false -Po\r C 把 h ull vig 
how … we II -talk moire dbou 
bubbling ^ap-tuv-ihg la-ti 
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multiple event handlers 




Tqst DriVq 


Change your copy of schedulers, and fire up your web browser. 
Try out the image buttons that now use addEventListener(). 
Does everything work? 



Evcv-y-thihg wovks/ 
have /Wav-^y -take a look. 


Alovihg you\r mouse ovcv- the 
ih-tc\rr»»cdia-tc image dhah^es 
the liiht text... 


^dates WtW 


...av>di 

oy\ 






▼ 職 2 


_ y e tmr _ A# vu Iw-i4! 



Everything works? Are you kidding? Now 
the hints don’t show up, and the images 
don’t change. Whafs up with that? 


What’s going on with Marcy’s browser? 

What do you think is going wrong for Marcy? Why 
isn’t the yoga app working? 

.^ 

ttm 七： 

1dvov/scv"S ou*b- 


you are here 
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internet explorer is NOT dom level 2 


Whafs going ov\ with Internet Explorer? 

The yoga page works great on Firefox, Safari, and a lot of other browsers... 
but something’s definitely wrong on Internet Explorer: 


IE shows a .uic i 匕 。“ ^ 

^ ottom s wus ba\r. Doublc-^li^k -that 

t^riahglc -to s« -this 略 sa3c . 






You can’t control wkat 
browsers your users are 
working witk. 

It’s your jot to 
Luild cross-trowser 
applications... and 
always test your code in 

LOTS oi browsers. 
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multiple event handlers 


IwtcrwGt Explorer uses a totally 
different evewt model 

Remember that addEventListener () only works on browsers 
that support DOM Level 2? Well, Internet Explorer isn’t one of 
those browsers. IE has its own event model and doesn’t support 
addEventListener () . That’s why Marcy got an error trying the 
yoga page out on IE. 

Fortunately, IE provides a method that does the same thing as 
addEventListener (). It’s called attachEvent () : 


currentBtn. attachEvent ( 11 onmouseover" , showHint 



TV^is is *biic 七七 

adds m 



O-P ih e 



You s*till 

o( Kar\dlcv bo \rur\ i\\t 
cv ⑼七 odtuvs. That r^ystc^ious 

(•false” disappears 
^i^hBvchiO. 




attachEvGwtO awd addEvewtListewerO 
are fimctiowall y equivalent 

Even though the syntax is different, these functions do exactly the 
same thing. So you just need to use the right one for your users’ 
browsers. 


currentBtn.attachEvent("onmouseover " r showHint); 

f — 

Use a-tlatV^tvc^O 

I 士 met ^ Inlwnet Expbrer 

5 -y.flov-cv* kv-ov/scv*s. 


currentBtn.addEventListener("mouseover " r 


showHint, false); 


Use 

3 ddEvc^-tLis-tc^cv -0 

-Pov- Pi\re*Po 乂 …— * 





...O^ra … 



•• well as £a^av-i 
^osi o-thev- 
… odeirh bmowsev-s. 



TV^csc avc all 
Level r Woy/scvs. 


you are here ► 
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welcome to browser wars 


Okay, I*m sorry, but thafs 
totally stupid. What were the IE 
people thinking? Two functions 
that do the same thing? 


The browser wars are just part 
of web development. 

Like it or not, not all browsers are the 
same. Besides, when Microsoft came up 
with their own event model, it wasn’t that 
obvious that the DOM Level 2 would take 
off like it did. 

And no matter how it all happened, you 
can’t write off people who use IE... or 
those who don’t. 



Dumb Questi9ns 



So this is all about which browser 
is better? 

No, it’s just that not all browsers were 
developed the same way. It wasn’t so long 
ago that the DOM wasn’t a sure thing, and 
Microsoft just decided to go in another 
direction. IE isn’t better or worse than other 
browsers; it’s just different. 

Yeah, but everyone knows IE’s a 
pain. I mean, come on... 

It's true that lots of web developers 
think that IE is hard to deal with. That’s just 
because it uses some different syntax. But 
look at things the other way: if you’ve been 
writing code on IE all your life, then it’s really 
Firefox, Safari and Opera that are a pain. 

Either way, you’ve got to write web apps that 
work on all major browsers, or you're going 
to miss out on a ton of users. 


Why does attachEvent() add the 
“on” back to the event name? 


A 


That’s just the way IE decided to 
implement that method. 


What about that last argument to 
addEventListener()? Where did it go on 
attachEvent()? 

You may remember that the last 
argument to addEventListener () 
indicated whether you wanted event 
bubbling (false) or event capturing 
(true). IE only supports event bubbling, so 
that argument isn’t needed. 


We’ll come back to capturing and bubbling 
once we've got Marcy’s app working on all 
major browsers. 


So which one should I use? 
addEventListener() or attachEvent()? 

Good question. If you think about it and 
look back at the createRequest () 
function, you probably already know the 
answer... 


In IE, event names 
kave ”on” in front, lor 
example, "onclick” ancf 
’Wmouseoven” 


In Firelox, Safari, 


and Opera，event 


names DON’T kave 
”on” in Iront ： ” click” 
and "mouseoven” 
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multiple event handlers 



Utility Function Magnets 

Just like with createRequestO, we need our event handling to work on 
multiple browsers. Your job is to use the magnets below to build a utility 
function for adding event handlers to events. 



you are here ► 
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utility functions abstract browser differences 



Utility Function Magnets Solutions 

Your job was to figure out a way to get our event handling to run on 
multiple browsers. You should have built a utility function for adding 
event handlers to events. 


This -fur>£.*tioy> *t5lkcs m "tKc objcd*t "tha 七 … "the hdrvtc o-p -the CVCh't ； like 

七 Wis cver^-t applies *to - ^ “d W oir u mouscovcv w ... 七 \\av\AW 





y 



/ou Could also have decked 

t ” sW Ust.. 

， carder of ih c 4/K 
doesh t 




there jetre nQ o 

Dumb Questi9ns 


Why didn’t we use a try...catch block this time? 


We could have, but unlike createRequest (), this 
function doesn’t need an error to know that something went wrong. 

Using document. attachEvent and document. 
addEventListener works just as well. Besides, the if ...else 
if block is a lot easier to read. 
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multiple event handlers 



WouldiVt it be dreamy if I never 
had to worry about adding multiple event 
handlers again? If only I could take my 
addEventHandler() utility function with me all 
the time... I guess ifs just a fantasy. 


you are here ► 
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use utility functions frequently 


addEveHtHandlerO works for ALL apps, 
wot just Marcy's yoga page 

So where should you put your code for addEventHandler () ? 

We’ll use it in Marcy’s yoga page, but it’s really a utility function. It will 
work for all our apps and in any browser. So go ahead and add your 
new code to utils . j s, so we can reuse it in later web apps we build. 


function createRequest() { 

try { 


request = new XMLHttpRequest(); 
catch (tryMS) { 
try { 

request = new ActiveXObj ect("Msxml2.XMLHTTP"); 

} catch (otherMS) { 
try { 

request = new ActiveXObj ect("Microsoft.XMLHTTP"); 
} catch (failed) { 
request = null; 



us ^U all 。价 


apps. 


function addEventHandler(obj, eventName, handler) { 
if (document.attachEvent) { 

obj.attachEvent("on" + eventName, handler); 

} else if (document.addEventListener) { 

obj.addEventListener(eventName, handler, false); 



utils.js 


Anytime you Indict 
cross-browser utility 
functions, store tkose 
metliocfs in scripts 
tkat you can easily 
reuse in your otker 
weh applications. 
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multiple event handlers 


Lcfs update mitPageO to use our new 
utility fuwctiow 


Now we need to change initPage () ， in schedule . j s, to use 
addEventHandler () instead of addEventListener (). Go 
ahead and make the following changes to your copy of schedule . j s: 


function initPage() { 

var tabs = 

document.getElementByld("tabs").getElementsByTagName("a") 
for (var i=0; i<tabs.length; i++) { 

var currentTab = tabs [ i]; 


currentTab.onmouseover 


showHint 


currentTab.onmouseout = hideHint; 


currentTab.onclick 


showTab 


M*mdio>/OV>loddi- 
niiPdje ； 
uv-lttcadcv-= 


schedule.js 


var buttons = 

document.getElementByld("navigation").getElementsByTagName("a"); 
for (var i=0; i<buttons.length; i++) 
var currentBtn = buttons[i 

addEventHandler(currentBtn, "mouseover", showHint); 


Jame (" a"); ,,. 


uj_ j_uiiLBLii. vyiiLLibLtiiiex ( n mou.y 0 Ove]r" , sJnowhLint, JTclI) 

addEventHandler(currentBtn, "mouseout", hideHint); 

4 

TTUiieiiLDLn . addEventLiatuiiui ( L" ; — liidtillinL,-~~FcLly^); 

currentBtn.onclick = showTab; 

addEventHandler(currentBtn, "mouseover", buttonOver); 

"currentBtn.addEventListener("mouseover", 


^oMt all 


addEventHandler(currentBtn, n mouseout , 


buL LuiiO v t!i f - lalb^r ； 

buttonOut); 


you are here 
















test drive 




Tqst DriVQ 


You should have addEventHandler() in utils.js and an updated 
version of initPage() in schedulers. Once you’ve made those 
changes, try out the yoga page in Internet Explorer and a DOM 
Level 2 browser，like Firefox or Safari. 


yrtai m P_ Level 2 - 

Wov/sc^rs. TKa-t ouv 

addtvcir\*tHay\dlcv-0 u 七山七 Y 
docs *tV^c v ■吵七 
i\\\^ -fov those Wowsers. 



Uh oiv.. rnov-c tv-oublc w'rth IE- 



But Acre’s ⑽ 
vc\>ovtcdi tWis Wc- 


V_^ 


ho,r \rollovcv-s wovk. 
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multiple event handlers 


Use an alcrtO to troubleshoot 


Without any error messages, it’s hard to know exactly what’s 
going on with Internet Explorer. Try putting in a few alert () 
statements in the event handlers, though, and you’ll see they’re 
getting called correctly. 

function buttonOver() { 

alert("buttonOver() called. n ); 

this.className = "active"; 

} 

function buttonOut() { 

alert("buttonOut() called. n ); 

this.className =""; 


So what else could be going wrong? 


The event handlers are getting called, so that means that 
addEventHandler () is working like it should. And we’ve already 
seen that the code in the handlers worked before we added the 
rollovers. So what else could be the problem? 

function buttonOver() { 


this.className = "active"; 



l/Ve khow these dass hdmes 
\righ-t-.. so what else 



this.className 
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we want the owner oi our handler 



We know the CSS works, and there's 
hardly anything else in those showHint() 
and hideHint() functions. So ifs got to be 
the this reference thafs a problem, right? 


“this” refers to the owner of the 
executing function. 

The this keyword in JavaScript always 
refers to the owner of the function that’s 
executing. So if the method bark () was 
called by an object called Dog, then this in 
bark () would refer to the Dog object. 

When you assign an event handler using 
DOM Level 0, the element with the event 
is the owner. So if you did tab • one lick 
=showTab; , then in showTab (), this 
would refer to the tab element. That’s why 
showHint () and hideHint () worked 
great in the last chapter. 


a”d Valiev ⑽七七匕 

sa^. k a wfe the 

b\roY/scv tails all 
W 七 objects 

c\c^b arc 

Jc -bV^osc Wuhovys. 



function showTab() 
var currentTab = 


this .title 


// etc. 



"The this keyword v*c-Pcv*s 
\x> the owhC\r o-p the 

七 ha 七 s \ruhhih0-.. 
-tha-t's the tab object. 


In DOM Level 2 , an event is still 
the owner of its handlers 

When you’re using DOM Level 2 browsers 
like Firefox, Safari, or Opera, the event 
handling framework sets the owner of 
a handler to the object that handler is 
responding to an event on. So you get the 
same behavior as with DOM Level 1. That’s 
why our handlers still work with DOM Level 
2 browsers. 
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But what about IE? 







multiple event handlers 


Evewt handlers m IE are owned by IE's evcwt 
framework, NOT the active page object 

You already know that IE doesn’t implement DOM Level 2. IE has its own 
event handling framework. So in IE, the event framework owns the 
handler functions, not the object on the XHTML page thatwas activated 
with a click or mouse over. In other words, this in showTab () refers to the 
IE event framework, not to a tab element on Marcy’s yoga web page. 


j u 迕鳴 a 
todt 

pc^+oir^s some i3sk 
lk f hahd,ih 9 CVChis oh a ； 

pay. 


function showTab() 


this .title; 


r 

You ^ ^ ^ 

OY l 

thc ^ “33 ⑽ d o, 


us, ^9 "this i h IB. 





L IE, tWis m cvcyrt 
^av>alcv-^at {x> 

ay> objctl *m i\\t ⑽七 


\ 


IE Event Handling ^ 
Framework 


IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIMIIIIIIIIIIMIIIIIIIIIM 


there ^ are no o 

Dumb Questions 


IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIMIIIIIIIIIIIMIIIIIIIIIIMIII 


What object does this refer to in the 
IE framework, then? 

this always refers to the owner of 
the function that’s currently running. So in an 
event handler under IE’s event framework, 
this points at one of the framework’s 
objects. 

It really doesn’t matter what that object is 
because it’s not all that useful. What we 
need is a way to get information about the 
element that the event occurred on. 


But if this is how IE handles events, 
how did our code work back in Chapter 3 
on Internet Explorer? 

Our code worked in IE because 
we were just using DOM Level 0 syntax. 
Anytime you assign a handler to a property, 
like currentBtn. onmouseover 
=showTab, that’s DOM Level 0. 

But our code now is using 
addEventListener () and 
attachEvent (). That's not DOM 
Level 0, and now this doesn’t mean the 
same thing as it did in that earlier code. 


Ok, great. So the page still doesn’t 
work in Internet Explorer. What now? 

Well, take a moment to think about 
what exactly you need. It's not so much the 
this keyword that’s important, but the 
information that keyword let us access. 

What exactly do we need to know about in 
our event handler functions? 
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we need an Event object 


attachEvGwtO awd addEvewtListewerO 
supply another argument to our handlers 


One of the cooler things about JavaScript is that you don’t need to list all 
the arguments that your functions take when you declare that function. So 
even if your function declaration is showTab (), you can pass arguments 
to showTab () when you call it. 

iT ^ 

function showTab() { 

var currentTab = this.title; 




// etc. 

The bad thing about that is sometimes you miss out on 
arguments that are passed to your function. 



1/Vc ； vc bo v-cpladc His” v/rth some 七 
pomis bo objcd*t oy\ *tKc >wcb 
tv-i^cv-cd 七 his ewt. 


Your event handlers get an Event object from 
attachEvewtO and addEvewtListenerO 

When you register an event handler using DOM Level 2 and 
addEventListener () ， or attachEvent () and IE, both 
frameworks pass your event handlers an object of the Event type. 

Your handlers can then use this object to figure out what object 
on a page was activated by an event, and which actual event was 
triggered. 

There are two properties in particular that are really helpful to 
know about. The first is type, which gives the name of the event 
that was triggered, like “mouseover” or “click.” The second is 
target, which gives you the target of the event: the object on the 
page that was activated. 


Event objects 
know wkat otject 
triggered tkem amt 
wkat type oi event 
tkey are. 



TVi'is is i\\t 

IVs same sbr\^ 

Vou passed bo addtvc^tUstcncrO, like 
** w y.load" 


S 。 we heed h> 
attess io the 
Evcht oWci ih ou^ 
handler -fuh^tiohs. 


mOlASCOVCV- OV- o 


Event object 


This is the object the cvcht 
od^u\r\rcd like a -tab oy By\ 
linage oh 3 web 


TV 七 

■ s ^ 7 - ^ 

Jf 二如、 s ， 岣讀 “ 

pOM Uvcl 2 -―辦 
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We need to mm the Evcwt argument so 
our handlers caw work with it 


You don’t have to list all the arguments a JavaScript function gets. But if 
you want to actually use those arguments in the function, you do need to 
list the arguments. First, we need to get access to the Event object in our 
handlers, so we can figure out what object on a page triggered a call to our 
handler. Then, we need to list the argument for that Event object: 


function showHint (e) 
// function code 

} 

function hideHint (e) 
// function code 


function showTab (e) 
// function code 


function buttonOver (e 
// function code 

} 

function buttonOut (e) J 
// function code 


t 二 



Event object 



sa 。 驗 


a 



M’ll heed -to dhahgc most o-f 

h> use the 

Evcivt object ihs-tcad “this.” 





With DOM Level 2 browsers, you can use either this 
or the Event object passed into an event handler to 
find out what element was activated. Do you think 
one approach is better than the other? Why? 
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Earlier versions of Internet Explorer provide the object that triggered an 
event in a property named M srcElement，” available on the window object. 
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is a 

P^opcv-ty wihC ( ow； 
a” Bve„i i h 

old ^ vcvsiohs of/£. 


myHandler(e) ■ 


myScriptjs 


target or srcElement? 

target srctlcwcwt 

You say 1 say t^^... 

The good news is that both IE and DOM Level 2 browsers make the object that 
triggered an event available. The bad news is that DOM Level 2 and IE use 
different versions of the Event object, each with different properties. 

In some cases, the Event object properties refer to the same thing, but the 
property names are different. And to make matters worse, modern versions of 
IE pass in an Event object, but earlier versions of IE make the Event object 
available as a property of the window object. 

Browsers that support DOM Level 2 , like Firefox, Safari, and Opera, 
pass an Event object to event handlers. The Event object has a 
property named “target” that refers to the object that triggered the 
event. 


Internet Explorer 7 passes an Event object to event handlers. The 
Event object has a property named “srcElement” that refers to the 
object that triggered the event. 



myScriptjs 
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, ♦ CHf + 

WMA ▼’ 




So you think you really know your browsers? Here’s a quiz to help you check 
your knowledge out for real. For each property, method, or behavior on the left, 
check off all the boxes for the browsers that support that thing. Good luck! 


addEVentL!stener() 


srcElement 


DOM LeVel 2 


addEVentHandlerO 


Var currentTak = tKis.iitle ； 


DOM Level 0 


Window. srcElement 


^ 

□ □ □ □ □ 

□ □ □ □ □ 

a q □ a d 

□ □ □ □ □ 


ctttacKEVentO 
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internet explorer or dom level 2? 


TWis is a POM Level 厶 
^u^6*b»oy\. Ko It- 

addEVentL!stener() 

IB have 

, t^s p^ 0 p c ^ y； bu-t o h 

srcEleuleiit d '++ 饮 ⑶ t objects. 


DOM Level 2 


的 P_ Level t 

kvo>wscvs suf^ov-t "tav^c 七 . 


target 


addEVentHcmdlerO 


This is ou\r utili-ty 
TUh^tioh, so 
i"t woirks oh all 
b\rowscv-s. 


'entTab = this-jjtle; 



0 


㈣ SST 


醺 □ 

a a 

El a 

鏟 a 

鼸 Q| 


@1 



Window. srcElement 

Old vemsiohs of /£ 

cittcicliEVent() cx P osc s,r ^Elcmch-t as 

^ plropcirty G -P the 

wihdow oljje 乙七 . 


_ Qj 

□ a 

□ y 


+ 


* 




So you think you really know your browsers? Here’s a quiz to help you check 
your knowledge out for real. For each property, method, or behavior on the left, 
you were to check off all the boxes for the browsers that support that thing. 


,^n slQQi】_ol 團團 
ro0 □ s H a a H a a 

y0 naaBHann 
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So “this” always refers to the 
function that called my function? 

No, this refers to the owner of the 
function. Sometimes that’s another bit of 
code, but it also might be an object, like a 
tab on a form that got clicked. 

Q/ But that’s not true in Internet 
Explorer, right? 

this still refers to the owner of a 
function in IE. The difference is that when 
you use attachEvent (), the owner 
of your function is an object in IE's event 
handling framework and not an object on 
your web page. 


Tke DOM provides 

an oLject-tasect 
moctel oi your wet 
page tkat your cocte 
can work witk* 

getElementBylctO, 
tke ctocument otject, 
and tke onclick 
property are all 
aspects oi usingf tke 
DOM in your code. 


thereiare no 。 

Dumb Questi9ns 


So we shouldn’t ever use “this” in 
Internet Explorer? 

Actually, this is still a very useful 
part of JavaScript, whether you’re using IE or 
a DOM Level 2 browser. But if you’re writing 
an event handler function, you’re probably 
better off avoiding this. If you're writing 
an event handler that’s going to be called 
using the IE event handling framework, via 
attachEvent (), then you’ve got to 
avoid using this. 

Q/ I’m still a little fuzzy on all this DOM 
stuff. Can you explain that again? 

DOM, or the Document Object Model, 
is how a browser represents your page as 
objects. JavaScript uses the DOM to work 
with a web page. So every time you change 
an element's property or get an element with 
getElementByld (), you’re using 
the DOM. That's all you really need to know 
right now, but we’re going to dig into the 
DOM a lot more in just a few chapters. 

As long as I use addEventHandler(), 
I don’t have to worry about all this DOM 
stuff, though, right? 

Well, you don’t have to 
worry about whether you should 
use attachEvent () or 
addE vent Listener (). But as you'll 
see in Chapter 6, there's still a lot of DOM 
work you'll end up doing. 

addEventHandler () takes care 
of registering an event handler to an event 
in a browser-neutral way. In other words, 
addEventHandler () works with all 
modern browsers. 


Q/ And that’s why it’s in utils.js, right? 
Because it’s a utility function? 

Right. addEventHandler () 

works for all browsers and many different 
kinds of applications, not just Marcy’s yoga 
page. So it's best put into a reusable script, 
like utils . j s. 

But even if we use 

addEventHandler(), we’ve still got these 
issues with target and srcElement, right? 

Right. IE 7 passes off to event 
handlers an Event object with a 
srcElement property that points 
at the object that triggered the event. 

Older versions of IE make that same 
object available through the window. 
srcElement property. DOM Level 2 
browsers provide an Event object with 
a property called target pointing to the 
object that triggered an event. 

I’ve heard that object called an 
“activated object” before. Is that the same 
thing? 

Yes. An activated object just means 
an object that represents an element on a 
web page that an event occurred on. So if an 
image is clicked, the JavaScript object that 
represents that image is the activated object. 

Since addEventHandler() took care 
of adding events on all browsers, why 
don’t we just build another utility function 
to deal with all this target/srcElement 
stuff? 

Now that is a great idea! 
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utility functions... redux 


So how do we actually frEJ the object that 
triggered the evewt? 

The best way to deal with differences in how IE and DOM Level 2 browsers 
handle events is another utility function. Our handler functions are now 
getting Event objects, but what we really need is the activated object: the 
object representation of the element on the page that the event occurred on. 

So let’s build a utility function to take the event argument we get from those 
browsers, and figure out and return the activated object: 


function getActivatedObject (e) { 

var obj; 



to tWis • 


obj = window.event.srcElement 
else if (e.srcElement) { 

// IE 7 or later 
obj = e.srcElement; 
else { 

// DOM Level 2 browser 
obj = e.target; 


^ of IB dually 

° h i SChd ah ob 〆.. ...v,W,6V. tells us *to i\st 

Y/’md 。… object 


/£ 7 has a 

is what w< 

w^h*t Oh "that b^rowsc^. 


return obj; 


55藏 

pssed - … C 


This -Puh^tioh 0oes 
ih u ^ ils js alohg with 
^^icl\c<\ucsiO ahd 
3ddEvch"tHah(J|gy-Q 





utils.js 
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You need to update Marcy’s code again. In all of the event handlers, you need to use 
getActivatedObject() to get the activated object. You'll also need to change the rest of those 
methods to use the object returned from that function instead of this. There are a few other 
changes you should already have made, too. Check off each task once you’re finished. 


傘 Update utils.js 

Add the addEventHandler () and getActivatedOb j ect () functions to the file. 
addEventHandler () getActivatedObject () 


傘 Use addEventHandler() instead of addEventListener() 

Use the generic addEventHandler () to abstract out DOM Level 2 and IE 
event handling differences. 

— Update initPage () to only use addEventHandler () 

傘 Use getObject() instead of this 

Update all your event handler functions to use getActivatedOb j ect () 
instead of the this keyword. You’ll need to make other changes to get those 
functions working as well. 

showHint () hideHint () 


buttonOver() 


buttonOut () 


showTab() 


When you think you’re done, try things out for yourself. Then, turn the page to 
see how we updated the code in schedulers and utils.js. 
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avoid this in dom level 2 



ExeRciSe 

§oLytiOH 


Your job was to complete the changes to schedulers so that all the event handlers would take an 
Event argument, and use the getObject() utility function from utils.js to figure out the activated 
object. You should have also removed all references to this in your event handler functions. 


window.onload = initPage; 
var welcomePaneShowing = true; 

function initPage() { 

var tabs = 

document.getElementByld("tabs") .getElementsByTagName( n a"); 
for (var i=0; i<tabs.length; i++) { 

var currentTab = tabs[i]; 
currentTab . onmouseover = showHint; 

currentTab.onmouseout 二 hideHint; - 

currentTab . onclick = showTab; _ 


ihcsc eve^is 


ihC. 


var buttons = 

document.getElementByld("navigation").getElementsByTagName("a"); 
for (var i=0; i<buttons.length; i++) { , 

var currentBtn = buttons [i] ; ’ You pvokaklY s cf 

addEventHandler (currentBtn, "mouseover" , showHint) ; / cavlicv - . AH 七 ^ multiple 
addEventHandler (currentBtn, "mouseout" , hideHint) ; } situation 

currentBtn.onclick = showTab; 、 / should MYJ be scUy ^ 

addEventHandler (currentBtn, "mouseover" , buttonOver) ;) - 
addEventHandler(currentBtn, "mouseout", buttonOut); 


function showHint (e) { 

if (!welcomePaneShowing) 
return; 


W，th ihc ^ io those J,dle,s. 


var me = getActivatedObject(e); 

switch (me .title) { 
case "beginners" : 

var hintText = "Just getting started? Come join us! 
break; 

intermediate" : 



case 

var hintText 
break; 

case "advanced' 
var hintText 

break; 
default : 


'Take your flexibility to the next level! 


'Perfectly join your body and mind 
'with these intensive workouts."; 
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var hintText = "Click a tab to display the course 

"schedule for the class M ; 

} 

var contentPane = document • getElementByld ( "content ▼，）； 
contentPane.innerHTML = M <h3>" + hintText + "</h3> M ; 


function hideHint(e) { 

if (welcomePaneShowing) { 

var contentPane = document•getElementByld("content"); 
contentPane.innerHTML 二 


'<h3>Click a tab to display the course schedule for the 


function showTab (e) { 

wir ooloe-todTab 一 tih-i-s .title ；' 

var me = getActivatedObject(e); 
var selectedTab = me.title; 

if (selectedTab == "welcome") { 


I 七 ’s domw'or) "bo £>3ll 
object -fv-om 


welcomePaneShowing = true; 

document•getElementByld("content n ).innerHTML = 

"<h3>Click a tab to display the course schedule for the 
} else { 


welcomePaneShowing = false; 


// everything else is the same... 




function buttonOver (e) i 

var me = getObject(e), 
me.clas sNameActivated 


active' 





fehis . as~ M act-wo M ; 

} 

function buttonOut (e) { 

var me = getActivatedObject(e); 
me.className = " " ; ^ - - 

tte-irs i className 一 ~- M -f- 





schedulers 


class</h3>"; 


class</h3>"; 
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it really works! 



Tqst DriVq 


It’s been a long journey，but you’re finally ready to test out Marcy’s 
yoga page one more time. See if everything works in both IE browsers 
AND DOM Level 2 browsers. 




Ycs^ |E is y/ovkm^ y\o^i, usm^ 

一一 7 



Mav-dys -finally satisfied 
W\i\\ s^cdulc fay. 
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EventAcrostic 

Take some time to sit back and give your right brain something to 
do. Answer the questions in the top, then use the letters to fill in the 
secret message where the numbers match. 


This model uses object-event = handler syntax 


123 4 5 6 7 8 9 

Use this function to register an event in DOM Level 2 


10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 

This is what Marcy teaches 


26 27 28 29 

Use this function to register an event in Internet Explorer 


30 31 32 33 34 35 36 37 38 39 40 

This is the object that triggered the event 

~4i 42 43 44 45 46~ 

This event happens when the user presses a key 


47 

48 49 50 

51 

52 

53 

54 

55 















22 6 

13 

39 

31 

35 

10 

55 

1 

18 19 16 28 


19 

20 

32 

35 

5 


49 

15 

26 17 2 


19 23 

40 

7 

25 

29 

34 

21 

19 

37 19 41 51 
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you rule 



EventAcrostic 

Did you figure out the secret message? Do you agree with it? 


This model uses object-event = handler syntax 

V 0 M L B V B L O 

~ 2 3~ ~4 5 6 7 8~ ~9~ 

Use this function to register an event in DOM Level 2 

AVVBVBhlTLl STENER 

"To 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 

This is what Marcy teaches 

i 0 6i h 

~26 27 28 29~ 

Use this function to register an event in Internet Explorer 

A T T A C H B V B M T 

~30 31 32 33 34 35 36 37 38 39 40~ 

This is the object that triggered the event 

TARGET 

~4i 42 43 44 45 46~ 

This event happens when the user presses a key 

"~47 48 49 50 51 52 53 54 55~ 


B V B hi T tt A N D L I H 6i 

22 6 13 39 31 - ~~35 10 55~ ~ 18 19 16 28 


IS tub b Y t 0 

19 20~" ~32 35 5~ ~49 15 26~ 17 2 


I N T E R A C T 

19 23 40 7 25 29 34 21 


I 


V 


19 


37 19 


41 


51 
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5 cisyncjironous appliccttions 




Ws like renewing your ^ 

driver’s license 



Well rm not going 
to sit around waiting 
any longer. 


Just be patient 


dear 


your time will 


come 


Are you tired of waiting around? Do you hate long delays? 
You can do something about it with asynchrony! 

You’ve already built a couple of pages that made asynchronous requests to the 
server to avoid making the user sit around waiting for a page refresh. In this chapter, 
we’ll dive even deeper into the details of building asynchronous applications. 

You’ll find out what asynchronous really means, learn how to use multiple 
asynchronous requests, and even build a monitor function to keep all that 
asynchrony from confusing you and your users. 


this is a new chapter 
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I hate to wait 


What does asynchronous really mcaw? 

An asynchronous request means that you don’t have to wait around while a web 
server is responding to that request. That means you’re not stuck: you can go on doing 
what you want, and have the server let you know when it’s finished with your request. Let’s 
take a view of this from 10,000 feet by first looking at what a synchronous request is, and 
then comparing it to an asynchronous request: 

A synchronous request for cola 



Aw asynchronous request for cola 






Like bc-fov-c, you make a request -to 
Ru-Pus -to you a to\a- 
■this you *tcll him he’s 扣 

asy^dWo^ous doj. 



I*m gonna ask for 
a pay raise. More 
chew toys. 


^ - Ot\Ct Ru-(*US ^OCS 

a-ftc\r youv- Cob. But 

this "time, Ru-fus is ^y\ 

AS/NCHROWUS doy. 
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asynchronous applications 



Pmally Ru-fus is oy\ his way 
boldk with you\r Co\di... 



… but bcda^sc \{!s d 
s^djvrorjojAS vc^ucst Y ou 

av-c -to-tally ar\d tomplc-tcly 

STWCk until tv^c 代 sfcmse 

domes bddk. 


-► 



Good boy, Rufus! But 
I gotta make you an 
asynchronous dog... my 
back carVt take this any 
more! 


o 



l/Vhch you get the 
\rcspohsc, you act 

M/V—stu^k. -- 

- ► 



/Wd mcay\s you cav\ 
do y/^a-bevev" you ，七 
wWile V^s jctt'mj he 

dola. VouVc r\o*t sWk 
like you v/cv-c )ic v/as 

syK\t^V"Oir\OlAS. 


By the -tirnc Ru-Pus gets 

back, youVe oh the 17 -fch 

yeeh. ?tY^tci tir^c *fo^ 
a b\rcak/ 



T\\t vesul 七 ’ 丨 s 

you y 七 Y ouv " 乙 0 l a . 丁 ^ 
di-f-fcv-c^tc is 七七 y ou 
y/crc / 七 tomplc-tcly stutk 
y/Kile you y/cv-c y/aitm^ +ov- it 
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asynchronous apps 


YouVg been building asynchronous 
apps all along 

Take a look back at the app you built for Mike’s Movies in Chapter 
2. When a user types in their username and leaves that field, that 
value gets sent to the server right away for validation. But the user 
can fill out the rest of the form while that validation is happening. 
That’s because we made the request to the server asynchronous. 


className 


thinking' 


function checkUsername() { 

document.getElementByld("username") 
request = createRequest(); 
if (request == null) 

alert ( "Unable to create request"); 
else { 

var theName 二 document•getElementByld( n username n )•value; 
var username = escape(theName); 
var url= "checkName.php?username=" + username; 
request.onreadystatechange = showUsernameStatus; 

request.open("GET", url, true); 
request. send(null); 

} 1 t 

a rc ' ucs 七 sc^ds loatk vcs^onsc da-ta 


gets caWed 

a us 饮 leaves the ^ ， eld. 



Rcmcmbcv -this last av-gumch-t io v-c<\ucst 
opChO? H “ •-. 


之 hO? |*t sS^Sj Alakc "this dh asyhdiiV" 。 扒 ouj ； 

quest. Doh’t make the usev wait OY\ -the 

一… _ )) 


sc\rvc\r s 


v-cspohsc. 


^alidd-te Usc\nr\amc 


i\\t sc\rvc\r. 


TV scrMCr ,, , , 

like a —Slate, status tode, a«d 

evenWlY vesfonse rbcMr 



丁 Wis tailback 
vu^s t 叫 

d3*t3* 


function showUsernameStatus() { 

if (request•readyState == 4) { 
if (request.status == 200) { 

if (request.responseText == "okay") { 

document.getElementByld("username").className 
document.getElementByld("register").disabled 
else { 

document.getElementByld("username").className 
document.getElementByld("username").focus(); 
document•getElementByld( n username n ) .select (); 
document.getElementByld("register").disabled 


response dsis 



: "approved' 
false; 

: "denied"; 



true 


AH o-P -the SCV-VCV- 
p ⑽ ssi ，_ ihc 
pllbwk, happehs whijg 

the usc^ is siill 

ihc -Pov-rh... ho 

av-ouhd. 
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Put sometimes you barely even wotice... 

When you built Mike’s Movies, you probably barely noticed the asynchrony. 
Requests to and from a server — especially when you’re developing, and there’s 
not a lot of network traffic — hardly take any time at all. 


As soov\ as a uscv- types *m a 

d^d leaves i\\t -field, 

ybs ailed. 



sev-vcv- 


validation.js 



如槪 e 〜 0 … 

si 

Va\\dait 

Usc\nr\amc 


No 七 _ 乩 t»^c -for 
or 50 I-P T\\c server 
rtsyov\ds almost u^^cd'ia-tclY 


/ou pvobably set tk w okay w 
一〜 Hgh-t away, bcW you 
havc 七〜 "to type ahy-thi h g else. 



response dlaia 


valliation.js 


But the response time on a live site is almost always going to be 
slower. There are more people competing for server resources, and 
user machines and connections may not be as powerful and fast as 
your development machine. And that doesn’t even take into account 
how long it takes a server to respond. If the server’s querying a huge 
database, or has to do lots of server-side processing, that slows the 
request and response cycle down, too. 


Tke response time on 
a live site will almost 
always te slower titan 
on a test site. 

Tke only way to know 
lor sure is to TEST 

your app on tke live site. 
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password check needed 


Speaking of more server-side processing... 

Mike loves the page you built him and has some more ideas. His site’s 
become popular, but some folks have been posting fake reviews under 
other peoples’ usernames. Mike needs you to add a password field to the 
registration form, verify the username and password asynchronously, and 
keep unwanted users out of his system for good. 

Mike’s got a server-side program that checks a password to make sure it’s at 
least 6 characters long and contains at least one letter. That should be good 
enough for his movie site. 



wah-ts -to add 

七 he ^rcgis-tira-tioh page. 


OK and password verification... 

Mike actually wants two password fields. The first password value will get 
sent to the server for validation. The second field is for password re-entry. 

The value in both password fields have to match. We’ll handle that at the 
client’s browser. 

And... how about some eye candy, too? 

Mike’s not happy with how long it takes to get a user processed when the user 
clicks the Register button. Since we can’t let users in until they are registered, 
Mike’s got an idea: while the form is being submitted and processed, he 
wants images from his collection of movies and posters to scroll by and whet 
the user’s appetite for reviews on those items. 
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^ ⑩广 


y\/|o\/\cs … 
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:^l|^rpeti your pencil 


There’s a lot to do on Mike’s site. Below, we’ve given you a screenshot of 
what Mike’s final app should look like. It’s up to you to make notes about the 
interactions that need to happen to add all the behavior Mike’s asking for. 



TVvc avc W 

^ ?asswovd 

*bo add 
tV^osc bo 
>(rtTMU. 


奸〜 w^hts images Jc his 
reviewed movies si, -the 
bottom 。岑 七 


Wkc also lays 
out his password 
^C<\ui\rcmchts ih YtA 
text Tha-t S just 
^o\Tt XWT/WL. 





web server 


Don’t forget about the server-side requirements! You’ll need two different 
server-side processes for this version of Mike’s app. Label the arrows 
below to indicate what you’re sending to the server, and what you think it 
should send back in response. 


should 
the sewer? 


(request 』 


should the scv-vcv- 
schd badk? 
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what do we need to do? 



There’s a lot to do on Mike’s site. Your job was to figure out the interactions 
that have to occur to get all this behavior working like it should. 




\A/c kcc? 

aWcad7 

act, so a 

sWl validate. 


^Ch -the usc\r Ch-tcv-s a 

password, wc h eed ^11 a 


Wiioh... 


. 办 at sc^ds a vc<\u 


cs-t -to 


server 


jf oV ^assviovd vaMa*t»o 灼 . 


|jf i\\t ?ass 如 ovd’s 灼。七 
vahd , 州如 ^ us 二代一 

tV>c ?ass^ovd. 




Wt t^t\ use JavaS^v-ipi 
■to Chsu\rc -tha-t both 
passwovd -fields rua-tdh 
bc-Povc the usev- Uh 
submit the -Pov-m. 


web server 


Were you able to figure out what our JavaScript needed to send to Mike’s 
server, and what the server-side programs should send back? 


Wlc s*bill ir^ccd *to *b^c 
username. So i\\\s is i\\t same as 
wlid'b we did batk'm CV^afbcv-1- 




」 
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W also heed io schd -the 
p^sswoird *to A^ikc ； s scv*vcv" 

•Po\r validatioh. 


password 





okay" or "denied" 

i\st ^ 


same 代 s^scs : 

w oka/ ov "Awtd- 
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(More) Asywchrowy iw 3 easy steps 

We need to finish up Mike’s web page, and then add all the extra 
interactions that he wants. Then, we’ve got to figure out a way to 
submit his form and animate those images at the bottom. 

Here’s how we’re going to take on the improved version of Mike’s 
Movies in this chapter: 


O Update the XHTML page 

We need to add two more password fields: one for entering a password, 
and one for verifying that password. We’ll also need a section for putting 
in those movie images. 




Validate the user’s passwords 

Then, we need to handle the user’s password. We’ve got to build a 
handler function that takes a password, sends it to the server, and sets 
up a callback that checks to see if the password was valid. Then we can 
use the same icons we used on the username field to let the user know if 
their password is valid. 




― k c DO"Ch 

-too. 


Submit the form 

Finally, we’ve got to build code to submit the form, and animate the 
images along the bottom. We can attach that code to the Register 
button’s click event instead of letting the form submit through a 
normal XHTML Submit button. 



We v\ttd Code bo submit 

於 s\v\U y/c vc y>i *to 

images a*t same 
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update the xhtml 

Wc need two password fields and a<div> 
for the cover images 

We’ve got to add a couple of password fields to the form, and then we also 
need a <div> at the bottom to hold all those cover images. Here are the 
changes you should make to your copy of registration . html: 



6d 

■to 


<html xmlns= n http :// www.w3.org/1999/xhtml"> 

<head> 

<title>Mike ! s Movies</title> 

<link re1= M stylesheet" href= M css/movies.css" / > 

<script src="scripts/utils.j s" type= M text/javascript"></script> ^ 
<script src= n scripts/validation.j s" type= M text/javascript"></script 〉 
</head> 

<body> 

<div id="wrapper"> 

<hl>Please register to access reviews : </hl> 

<form action= M register.php" method="POST"> 

<ul> 

'username n >Username : </labelxinput id 
'text" name="username" / ></li> 


*bV^c 

S6\r'»fb as bcW.Wc 
vx jus*t add ^odt 

» 矜 j s . 


^ ^ced -two 

0 ，e 4, ihc 

•… 份 I passwo^ 

io VCH-Py 

七 k password. 


Make 

so 

y, 0 \> 0 d) ^ 

sec 4a 七 usevs 

arc 切?•崎 


<lixlabel 


<lixlabel 



username 



<lixlabel 


<lixlabel 


<lixlabel 



passwordl">Password:</labelXinput id= n passwordl" 
'password" name="passwordl" /X/li> 

'password2 ">Re-enter Password : </labelXinput id= M password2 
'password" name="password2" /X/li> 

<li class="tip">Passwords must be 6 or more characters and 

contain a number.</li> 

f or= M f irstname">First Name : </labelxinput id=" f irstname 
type="text n name= M firstname" / ></li> 

f or= M last name ">Last Name : </labelxinput id= M lastname " 
type= n text" name= M lastname" / ></li> 
f or= n email ，， >Email: </labelxinput id= n email” 
type="text n name= M email" / ></li> 

<li> 

<label for= M genre">Favorite Genre : </label> 

<select name= M genre n id= M genre"> 

〈option value= M Action M >Action</option 〉 

〈option value= M Comedy M >Comedy</option 〉 

〈option value= M Crime^>Crime</option 〉 

〈option value= M Documentary">Documentary</option 〉 

〈option value= M Drama">Drama< / option 〉 

<option value= M Horror">Horror</option> 

〈option value= M Musical">Musical</option 〉 

〈option value= M Romance">Romance</option 〉 

<option value= M SciFi">Sci-Fi/Fantasy</option> 


TWis label lays out 
Mik^s passy/ovd 

a 灼 d 

i\\t CSS styles \i 
■to be v-cd- 
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<option value="Suspense n >Suspense</option> 

<option value="Western">Western</option> 

</select> 

</li> 

<lixlabel for="favorite M >Favorite Movie : </label><input id="favorite" 

type= M text" name="favorite" / ></li> 

<lixlabel for ="tastes">Describe your movie tastes : </labelxtextarea 

name= M tastes" cols="60" rows= M 2" id= M tastes"></textarea></li> 


<lixlabel for="register"></labelxinput id="register" 

type= M submit" value="Register" name= M register" / ></li> 

</ul> TW»s *,s frcUy 七 a 吵七心 r 肅 d. ... 3hd ihcy) 3 buh , 

- I/Ve add a <dw> av\ id - -tha-t /l/jike • ■ • ■ mov，c dov 的 


</form> 




<div id= n coverBar M > 

<img src= M images/coverMatrix.jpg" width= M 82" height="115" 
style="left : Opx; n /> 

<img src="images/coverDeadRingers.jpg" width= n 82" height="115 n 
style="left : 88px; n /> 

<img src= M images/coverDrStrangelove.jpg" width= n 82 M height="115 M 
style="left : 176px;" /> 

<img src="images/coverFuturama.jpg" width= n 82 M height= M 115 M 
style="left : 264px;" /> 

<img src= M images/coverHolyGrail.jpg" width= M 82 n height="115" 
style="left : 356px; M /> 

<img src="images/coverRaisingArizona.jpg" width="82 n height="115 
style="left : 444px;" /> 

<img src="images/coverRobotChicken.jpg" width= n 82" height= n 115 M 
style="left : 532px;" /> 

</div> 

</div> 


said 3<>i reviews 



</body> 

</html> 



and download the examples 
for Chapter 5. You’ll find 
the cover graphics, as well as 
a version of registration . html 
that matches this XHTML, and a new 
version of movies . css to go with the 


Download the CSS and 
graphics from Head First 
Labs. 

Go to the Head First Labs site 


new XHTML. 



Dumb Questi9ns 

Why are you using style attributes on those 
cover images? Isn’t mixing style into the XHTML a 
really bad idea? 

It is. But the only other option is to have a different 
class for each image in that <div>. It's good to try 
and separate content from presentation, but if it makes 
your XHTML and CSS a real mess, then you sometimes 
have to break a rule to make your XHTML and CSS 
manageable. Who wants to keep up with 10 or 15 different 
CSS classes, one for each movie image? 
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test drive 




Tesr DriVq 


Check out Mike’s Movies... with password and images. 

Once you’ve made all the changes to registration.html, or downloaded the examples, open up 
the page in your web browser. Make sure that all the cover images show up, and that there are 
two password fields. You should also check that the username field still sends a request to the 
server for validation, and that the Register button is disabled when the page first loads. 







^ kM 1 % 1^-0 f 




nt¥ 


The Rcgistcv- 
butfcoh should be 
disabled Hgli-t how. 


XV^cvc should kc 
七 y/o passY/ovd 
fields. Al so wa k c 

SUVC *t^a*t ov\ly 

asWisks affcav 

you 切? € 


m 


■v: 




The uscvha^c -field 
should still wovk. You 
should be able -to type 
ih a usc\fharwc, yt Bv\ 
^ P^rogircss idoh, a^d 
⑶ either a 
rwav-k o\r ay\ )(. 


Hcv-c av-c all 

/l/l'jkc^s WOVIC 
\mays... >wc 
ay>\ma*tc 

sdvoll *tV\cse la 七 cv. 
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W\i^ ihc XttT/WL 

AoY\t } wc move oy \ 
io validatmg passwords 


Procedure Magnets 

By now, you should be pretty comfortable figuring out 
how to tie an event on a page to a request for a server-side 
program to process some data. Put the magnets under the 
right task. Order doesn’t matter in most cases, so just match 
the magnet to what that magnet helps you accomplish. 


To handle an event: 



To send a request object to the server: 
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exercise solution 



Procedure Magnet Solution 

Your job was to build a process for connecting an 
event on a web page to a server-side program. 


To handle m event: 


ttevVs V/ilCV-C youv CVCV>*t—spcdl-f lt 
be^dv'iov odduv-s. >wov-b 

y/i*tKou*t CVC^*t ii3^dlcV"S. 


You 63^ Octdfct 
tV^CSC m 3^ ovdev*. 
x/ou \ust V^avc 

have all w 

bc-fovc ^ouv to&t 
viill >wovk* 


Wt，yJt ^ ^llih 9 -this mi-tPagcO. 





usevs tav\ >/ovk a \>ay- 


Ob-taih a V*C*fcVCh 匕 c 

■to ah obje^-t, ahd 
"B>Ch Cithcv assi^h 
七 he hdhd(cir "to i*ts 
cvchi piropcv-ty ov use 
dddEvch-tHa h dlcv-0 -to 

^3istcv the hdhdlev io 

cveivt oh -tha-t object. 


dh 


To send a request object to the server: 


These have {jo 










^s e , lo tall 


Aw W server res ? ods. 


Create a callback function that will be called when 
the server responds to the request 


Y^u use v-c<\ucstsc^dO 
■foir -this. 


This should take ihc wv 心叫崎 
ahd d。somcihihg with that v« pohSc . 
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If you need new behavior, you probably 
need a new event handler fuwctiow 

We’ve got to validate a password once a user enters something in the 
password form fields. So we need a new event handler to validate 
passwords. We also need to register an onblur event handler for the 
right password field. 

validation . j s already sets up event handlers in initPage (), 
so we just need to add a new event handler assignment: 



window.onload = initPage; 
function initPage() { 

document.getElementByld('username').onblur = checkUsername; 

document.getElementByld('password2').onblur = checkPassword 

document.getElementByld('register').disabled = true 


function checkPassword() { 

// We'll write this code next 


All wc heed -to do is 一 ^ 
hahdlcir ； this "to the 

passwovdZ -field. 




validation.js 


thereiare no o 

Dumb Questions 


Why didn’t you use addEventHandler() 
to register the checkPassword() handler? 

Because we’re only assigning one handler 
to the password 〗 field. If we needed multiple 
handlers for that field, then you would need 
DOM Level 2 or IE's attachEvent (). 

In those cases, you’d want to use 
addEventHandler (). But since this is 
a single handler on an event, we can stick with 
DOM Level 0. 


(^Sterpen your pencil 

、 Whv Ho vou thii 


Why do you think checkPasswordO is 
registered to the password 〗 field, and not 
the password 1 field? 
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two passwords? 


(parpen your pencil 

Solution 




Why do you think checkPassword() is registered to the password 〗 
field, and not the password 1 field? 

iVc *to -the passwords d^a'ms-t ca 匕 h 

o*tiiC\r bc-fo\rc *t^Crw *to sc\rvc\r •foy* 

ya]ida*tiori. So y/c do the uscy-^s 

印 孕 P 科 V^r .4 -foy- bo-th f 3 ssv/ 0 \rd -ficlds-. 



nr^n 






^Ch thcv-c s 
a value -Po\r -the 
password 
-field ； wc Co\a\A 
schd a v-c^ucs-t -to 
the sc\rvcv-... 


...but 

do do »*f "tV'C 

sedo^d ?ass>wovd 
Jf icld docs^t 
w aU^? Ouv 

v-c^ucst >would be 
mca^>^ css * 


T d ahd 松 “ 。仏仏 ids 


SCVVCV- 
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E%eftct$e 


It’s time to write some code. Using what you’ve already figured out, plus the hints below, 
you should be able to write the code for the checkPassword() event handler and the 
showPasswordStatusQ callback. Take your time... you can do it. 




Hints? 

(J) There's a CSS class called %% thinking #, that you can set either 
password field to in order to get an %% in progress" icon. The 
•'approved" class shows a check mark, and the ''deniecT* class 
shows an X. 


whch the 
sc\rvc\r \rctuV"hS S \rcspohSC 
"to you\r 

gvghj ： hdhdlev" v-uhs wheh 
a CVCht Oh youv- 


(|) The program on the server that validates passwords is at 
the URL %% checkPass.php ## . The program takes a password and 
returns “okay" if the password is valid, and % 4 deniecT # if its not. 
The parameter name to the program should be “password." 


々 tr kPass 
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send a password request 



Your job was to write the code for the checkPassword() event handler and the 
showPasswordStatusQ callback. See how close your solution is to ours. 


function checkPassword () { we II use these -field 

di lot, i"t sChSC 

var passwordl = document. getElementByld ( "passwordl M ) ; -to put therw both ih-fco variables. 

var password2 = document. getElementByld ( n password2 ") ; _) 

passwordl. className = "thinking"; ^^ 、〜 soo ^ as stav • 七， y^ccd *to 

\to^ 

// First compare the two passwords 


if ( (passwordl.value 
passwordl.className 
return; 

} 



nn ) || (passwordl.value != password2.value)) { 

"denied"; make suve \>ass>wov*dl ^ 、 

heldi ew? 切 . Thch, y/c Y\ctd b> CoWare the 

values o( 七 he 七 v/o -fields. 

\>assy/ovds dor!i 
sV^ov/ ervov- ar\d s*to\> pv-otess'm^. 


// Passwords match, so send request to server 


var request = createRequest(); 
if (request == null) { 

alert("Unable to create request"); 

} else { 

var password = escape (passwordl.value); 



為 P : 巧 ㈡ ② p 


use. 


var url 


checkPass.php?password= n + password, 


lA/c 63 ^ use ?ass^a 

Acid 、 value 』 

ttc saw ⑽从 


request.onreadystatechange = 
request•open("GET", url, true); 
request.send(null); 


showPasswordStatus 

l/Ve VC -this dh 

asyhdh\rohous \rc<\ucst. That will 
be \rcally irwpo\rtaht latcv-... 


Set ihe 乙 allbadk. 
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Make suv-c 

at 七 17 mattes 七 k value ok t^c 
Ytad^iaiteMa^t ^ 0^7 ol 

七 ve'ues 七 object 


t 卞 


or\ [ 



function showPasswordStatus() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var passwordl = document.getElementByld("passwordl n ); 

if (request. responseText == "okay") { ， l-P wc get 3 v-cspohsc o*f w okay w ； 

show the 乩杜 k mavk i^oh W 

passwordl. className = "approved" ; password/ -field 

document.getElementByld("register n ).disabled = false; 


else { 

passwordl.className = "denied' 

passwordl. focus () ; - ...move 

passwordl.select(); ^ ■ 


l-f ihc password's y\oi valid ； ^ Rcmcwbcv- -to 

1 ； the CSS dass... enable *bV^c 

u 如 ? ass^dl ^ UtW 

-… 扣 dl hijhlijhi 七 he fSssv/ordl -field- 


document.getElementByld("register n ).disabled = true 


c •坨忪 ? ass^ovdi vaW, 

m ^ let y^sec vcysW, 

so d\saWc tV^at WtW 


there jcive no 

)umb Qu 


D 


Should we be sending a password as part of a GET 
request? Is that safe? 

Great question! Well talk a lot more about GET, and how 
secure it is, in Chapter 12. For now, just focus on the details of 
asynchrony, and well look at securing Mike’s users’ passwords 
a bit better later on. 


Questi9ns 

I tried this out, and I think there are some problems... 

J\l Really? What were they? What do you think caused them? 
Try out our code, and see what you get. Are there things you 
would change or improve? Try entering in just a username, or 
just valid passwords. What do you see happening? 
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test drive 




Tqst DriVq 


How does Mike’s page look and behave? 

Make the changes to validation . j s that we did, or use your own version (as long as it 
does the same basic things). Then, try the page out. What’s happening? Do you think our code 
works, or are there problems? 









n 


.… 如 k 七?卿以 

docs -bV\a*b wd Is 

vt -to-tallY tlcav -to uscvs? Wc 

way ^ avc "^ 0 tomt "to 
栋 a 七 a little laW- 






Nieh 




Dr^rri 


■ .i! j AS a .r^£ S -o>n 


AdVBr.t^r-d ri nu'apvniD § 

eIij^a,. ind 4ri nnidlbf 
thim B^ll 


RtiB'Sii* 


4 >» 


丁 he usev-hame -field still 

峨 k f . th^s good. 
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vca 


\Vj ^ast 


BE . 概 H 

Your job is to play like you’re one of 
Mike’s potential eustomers … and a fast- 
l^ping one, at 侃 t. Try and figure out 

yAM happens when someone 
t^pesina username, and 
then quickly moves to 
恍 ing a password in ho6x of 
{he password fields. 


asynchronous applications 


Type ih a 

USCV-harwC... 


… and {\\tr\ <\ui 乙 kly -type 

youv pdssy/ovd, or\dC -. 

… "tliCh 





卜 -tab out 

i\\t sttoi\d 
^>ass>wovd -f »cld 
-bo -bv^yv 

6V^c6kPassv/ovdO 

cvc^t V^3^dlcv"- 



w k< !■ 叫 v*s 








a 








Does anytoig strange h^pen? Azat’s 
going on? ^at do you iiink miglit be 
causing lie problem? 
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be the fast user 





vcall7 

BE §©I^S©n 

Your job was to play like you’re one of 
Mike’s potential eustomers … and a fast- 
l^ping one, at 侃 t. Try and figure out 

yAM happens when someone 
t^pesina username, and 
then quickly moves to 
恍 ing a password in ho6x of 
{he password fields. 



⑽ ihS-t\ru^-tiohS 


Type \v\ a 
uscv-har^c... 


pmalV /， ⑽七 
i\\t sttoy\A 
^assv/ovd ^*cld 
-to *tv'»^v 

^c6kPass>wovdO 

cvcwt 


… a 於 d *tKcir» <\uitkly type m 

youv pdssy/ovd, ov\Ct - 


■ 3 iY\d thch a^dih 


the 




ield 


ood 


Ot\Ct both 
passwords avc 
p^sswovd 
r^oves "fco w | 
Vog\rcss. w That’ 
■fcoo. 


TV^c ?assw 


ovd 


s-tatus C^ts -to 


0 ka7 ov dc^cd, so 

okav ， Wt- 


The usc\rhamc 〆 

^C^ucs-t hCVCV- 

keW/ The -field 

still shows -the u /h 
fVo 3 \ress\ 0h . 


Tiic vesulis 


V^e usev^awe ^>cld 

sV^s *tV\c w U 
pvo^css ， So A*av, 

so ^ood* 






m d 


Brf.Wji Vo-i» 
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r pencil 



It’s time to figure out what’s going on with our asynchronous 
requests. Below is the request variable named "request”, as well as 
the server. Your job is to draw and label the interactions that are 
going on between the checkUsernameO, showUsernameStatusO, 
checkPasswordO, and showPasswordStatusO functions. 



Username() 


validation.js 


wm< 


ameStatus() 


uv-IHcadcv—.... 


5 


validation.js 


Olrdcir an -these 
卜 3 岫 ecu? How 
docs 七卜七 秦 “he 


^ 1 ■' It 

-ns 

uvlf cadcr—.... 


Password () 




validation.js 


I 


rmJ 


n 




showPasswordStatus () 


uv I Header—.... 


validation.js 



Web server 



In JavaScript, two objects tkat 
skare tke same name skare 
everytliing, including property values. 
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one request object for one request 

With ONE request object you caw safely send 
and receive ONE asynchronous request 

Both checkUsername () and checkPassword () use the same request object. 
Because both use the variable name request, it’s just a single object being used 
by both. Take a close look at what happens when you’re just making a single 
request, and there’s no password validation involved: 





validation.js 


validation.js 


a vc<\ucs*b object. 





TV b\rowsc\r CaWs the W-tu.. 
spcdi-Picd ih the v-c^ucst object’s 
^v-cadys-ta-tc^ha^y pv-opev-ty. 


TV^c sevvev 
*rts vcs\>o^sc- 


The sKoy/Uscv-y\aw»cS*ba*tus() 

tallbatk »s look，^ 

w oka/, so \i updates 七 k 

pay 
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Web server 



9 ^ ^daitd 
ihc 

^ovjs up. 
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Asynchronous requests don't wait ow 
anything... including themselves! 

But what happens when there are two requests sharing the same request object? 
That object can only store one callback function to deal with server responses. 
That means that you could have two totally different server responses being 
handled by the same callback... and that might not be the right callback. 


as beW... «。 



validation.js 



validation.js 





But b^fo|rc the usev-harwe 
is handled ； 

dhcdkPassy/o\rdO is called - due 
■to a -fasi typev-, -Pov- example. 


validation.js 


Web server 



^ ow 诎 eme 扣 c TWO 
，也 pchdih 3； bui 

+Uh ^ io ^ assig hCC |； 

^owPasswo^dS^usO 


，必 w ) 叫 

so ihe -Pov- that ^，cld 

p Vclr ^ah 9 cd. H siays i h X 
r \rojv-css ro^revc^. 


i-f SCWCV VCSPoir»SC 

-Pov" uscv*ir\di^c is 'defied 
-fov ^assy/ovd ； i*t s w okdy 
v/ould happen 


? 


Wc V^avc y^o v/av o( 
resist \s U ^r cst ! 
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two request objects for two requests 


If youVe making TWO separate requests, use 
TWO separate request objects 

The problem is that we’re using a single request object to make two aynchronous 
requests. And what does asynchrony mean? That those requests won’t wait on a 
browser or server to get moving. So we end up overwriting one request’s data with 
data from another request. 

But what if we have two asynchronous requests? The two requests won’t wait on 
each other, or make the user wait around, but each request object will have its own 
data instead of having to share. 


J h，S ，$ ，印 ▲ W ^ C a ucsi 

仪，略 /t yts its 处七 

、如 d values. 



validation.js 



The ysssY/ovd \rc^ucs-t uses 
\rc<\ucsi object, 

\rc<\ucst/- 


TWis V^as a 

dallba^ 

^cA ： \or\ ass'»^cd -to 


rlf jead 


validation.js 


onreadys tatechange 
shov/Passy/ovdS^ •(: us 



sev^'/cv vcs^ov\ds- 


okay" 


Web server 


validation.js 
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You should be ready to update your code to use two request objects. You’ll have to change 
code in validation.js in several different places. See if you can find them all. For username- 
related requests, use the variable name usernameRequest. For password-related requests, use 
passwordRequest. When you think you’ve got them all, turn the page. 


thereicire no o 

Dumb Questi9ns 


What does any of this have to do 
with asynchrony? 

Well, think about this: what if the 
request to validate usernames was not 
asynchronous? Then there’d be no way that 
the password request could get sent before 
the username request completed. So this 
problem wouldn't exist in a synchronous 
environment. 

Wouldn’t it be easier to just make 
the username request synchronous? 

It would be easier, but would that be 
the best application? Then users would have 
to wait for their username to get processed. 
Then, and only then, could they move on to 
the password field. Sometimes the easiest 
technical solution is actually the worst 
usability solution. 

Why do the two request variables 
share property values? Isn’t each 
declared locally within separate 
functions? 

It looks that way, but request 
is actually first defined in the 
createRequest () function. Not 
only that, but request is defined in 
createRequest () without the var 
keyword. Any variable declared in JavaScript 
inside a function, but without the var 
keyword, becomes a global variable. 


So why not just use the var 
keyword in createRequest() to fix all of 
this? Wouldn’t that make request local? 

Good question, but that would cause 
a different set of problems. If request is 
local, then how would a callback function get 
access to the request object? The callbacks 
need request to be global, so they can 
access the variable and its property values. 

So how does assigning request to 
two other variable names help? 

In JavaScript, assignment is handled 
by copying, and not by reference. So when 
you assign one variable to another value, the 
new variable gets a copy of the assigned 
variable. Consider this code: 

var a = 1; 
var b = a; 
b = 2; 

alert ("a = ’▼ + a); 
alert ( n b = " + b); 

You might expect both values to be 2, right? 
But they’re not. When JavaScript interprets 
var b = a ;, it creates a new variable 
named b, and puts a copy of a into that 
variable. So no matter what you do to b, it 
won’t change a. 

In the case of the request object, if you 
create two variables and assign request 
to both, you'll get two copies of the original 
request object. That’s two independent 
request objects that won’t affect each other. 
That’s just what we want. 


Wow, this is kind of hairy. I’m still 
confused... what should I do? 

You may want to pick up a good 
JavaScript book, like Head First JavaScript 
or JavaScript: The Definitive Guide, for 
more on variable scope and assignment in 
JavaScript. Or you may want to just follow 
along, and pick up what you’re a little unsure 
about as you go. 


JavaScript considers 
any variable outside a 
lunction, or a variable 
cteclarect witkout tke 
var keyworct, to Le 

GLOBAL^ Tkat variable 

can Le accessed Ly any 
function, anywliere. 
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two from one 



Change all the variable names in checkUserName(), showUsernameStatus(), 
checkPasswordQ and showPasswordStatusQ fuctions in the registration.js file. 


function checkUsername() { 


document.getElementByld("username").className 


thinking' 


It’s vcy-vf 

vav - 

•to be global, so 
tallbadk 6av\ 

Yt^Cctr\t.t *tW»s 

vav">aWc- 




createRequest () 




usernameRequest 
if (usernameRequest —— null) 

alert("Unable to create request"); 
else { 

var theName = document•getElementByld (’ ▼username” ） •value; 
var username = escape(theName); 
var url= "checkName.php?username=" + username; 
usernameRequest .onreadystatechange = showUsernameStatus; 

usernameRequest .open("GET", url, true); ^>3 




usernameRequest .send(null); 


Se 七 pv-opcv**t»cs ay\d send v-c^ucst 
Wst like you did beW. 




tteves why 
you heeded 

"to be global ： -this 
^allbadk also 
"to aucss -the 
same obje 匕七， 


function showUsernameStatus() { 

if (usernameRequest.readyState == 4) { 

if (usernameRequest.status ==200) { 

if (usernameRequest.responseText == "okay") { 

document.getElementByld("username").className 
document • getElementByld (’ ’register’▼) . disabled : 
} else { 

document.getElementByld("username").className 
document.getElementByld("username").focus(); 
document.getElementByld("username") .select (); 
document • getElementByld (’ ’register’▼) . disabled : 


: "approved 1 
false; 

: "denied"; 


true 


function checkPassword() { 


var passwordl = document.getElementByld("passwordl n ); 
var password2 = document.getElementByld( n password2 n ); 
passwordl.className = "thinking"; 
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// First compare the two passwords 

if ((passwordl.value == nn ) || (passwordl.value != password2.value)) { 

passwordl.className = "denied"; 
return; 

} 

// Passwords match, so send request to server 



^ 一 ? assY/ov-dRc<\uc^ *»s used U all 
^assY/oyrd-vcIa-bca 


passwordRequest • op—/ n ^D mn J - x - 



passwordRequest. send(null); 


function showPasswordStatus() { 

if (passwordRequest.readyState == 4) { 

if (passwordRequest.status — 200) { 

var passwordl = document.getElementByld("passwordl n ); 
if (passwordRequest.responseText == "okay") { 

passwordl.className = "approved"; 

document•getElementByld("register")•disabled = false; 
} else { 

passwordl.className = "denied"; 
passwordl.focus(); 
passwordl.select(); 

document.getElementByld("register").disabled = true; 



There’s still a problem with the registration page. 
Can you figure out what it is? 
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verify and restrict 


O 




Validation requires both 
VERIFICATION and RESTRICTION. 

Verification is making sure that a certain 
piece of data is okay for your system to accept. 
Restriction is not allowing a user to do 
something until that verification is complete. 
Good validation combines both of these 
components. 

When we wrote the first version of Mike’s 
page, we disabled the Register button in the 
initPage () function, and re-enabled it once 
the server validated the user’s username. So we 
verified the username and restricted the Register 
button. 


But now there’s another level of validation: we 
have to make sure the user’s password is okay. 
Something’s going wrong, though... even if a 
password is rejected, the Register button is getting 
enabled, and users can click the button. 



補 dation requites 

vesication 


te^tricfiGn- 


In asynchronous applications, 
it’s not enough to just verify 
data entered by the user. While that 
verification is occurring, you have to 
restrict the user from doing things that 
depend upon verification. 


there-icire no ^ 

Dumb Questions 


How is enabling the Register button part of 
restriction? That doesn’t make sense... 

Restriction is the process of not letting a user 
do something until verification is complete. So part 
of the restriction process is enabling a button or 
activating a form. In fact, the end of every restriction 
process is the lifting of that restriction. 


202 Chapter 5 





asynchronous applications 


Right wow, we disable the Register button iw iwitPageO., 


The movie page works correctly at the beginning. When the page loads, 
the Register button is disabled: 

function initPage () { 

document•getElementByld("username")•onblur = checkUsername; 
document•getElementByld( n password2 n )•onblur = checkPassword, 


TW»s W 七 W» s enabled … 从 

kovredtiY ) 州 akc swyrc ^ 

do ^t\\ 

^oi a val'»d use 作 amc 

av\d fass>wovd. 

...and enable the button in the callback functions 

We enabled the Register button in the two callback functions, 
showUsernameStatus () and showPasswordStatus () . But 
we’re still getting incorrect actions on the form. 






slnowUsern 

if (usernameRequest.res 


ponseText 


okay' 


"approved' 

false; 


document.getElementByld("username").className 

document.getElementByld("register").disabled 

else { 

// code t〆 reject username and keep Register disabled 


showPas swordStatu^) 


BW oUV^ ^allkadks ⑶ al^le 如 

W 如 W 七 W " 

vAkaW sUuM-i 6—lctcs. 


if (passwordRequest. responseText = 

"approved' 


'okay' 


false 


passwordl.className = 

^-document.getElementByld("register").disabled 

[else { 

// code to reject username and keep Register disabled 


T • 

cabled usc^ar，c «svaM, 

七 he passY/ovd isv\*b- 5 ,vcs * 
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you can't count on order 


Asywchrowy means you caw't count on the 
ORPERINfr of your requests and responses 

When you send asynchronous requests, you can’t be sure of the order that the 
server will respond to those requests. Suppose that a request to verify a username 
is sent to the server. Then, another request is sent, this time to verify a password. 
Which one will return first? There’s no way of knowing! 



Username() 


validation.js 







showUsernameStatus () 


uvlHcadcv-—.... 


validation.js 




Password() 


validation.js 




showPasswordStatus() 


uvIHcadcv—•••• 


validation.js 


TWis 代'必七 W y 七奶七^七… 


onreadystatechange 
siiowUscv-ir\amcS*ta*tus 



-but that doesh't the 

ircspohsc -P\rom the sc\rvcv- will be the 
七 vcspohsc the b\rowscv- yts. 


IZ3 


okay" 


This 外今 act SCht SCdOhd... 


Web server 
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rpen your pencil 


Can you figure out at least one sequence of requests and 
responses that would result in the Register button being enabled 
when either the username or the password is invalid? Draw or list 
the steps that would have to occur for that to happen. 
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username or password? 



Here are two different sequences where the Register button 
ended up enabled when it shouldn’t be. Did you come up with 
one of these? Or something similar? 


o The user enters a valid username 


o 


TV^c 七 cv 

s*bav*ts ou-b 
disabled- 


s 




validation.js 



The user enters two passwords that don't match 



\ 


validation.js 


d 0 X ^7 L p swo ^ 5 

so > tHe Seirv ^ 

• sLosi 

hs W de^d ^u/t 


The password field shows the u demed" X mark 






• "‘ sevvev vcWv^ »*ts 
vcs^oy\sc a {七 cv 

^assY/ovds V^avc 
been dehed. —^ 


The username callback gets an 、 'okay’’ response and sets 
the username field to show the ''approved" check mark., 
and enables the Register button. 


validation.js 




Web server 



丁 he chd v-csult is a 
valid usc\rha^c ; ihvalid 
password, and enabled 
Register butW 
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o The user enters an invalid username 


T\\t Rcystcv 

Wtto 矜 always 

s*tav*b ou*t 




This v-c^ucs-t dhd 

S OhSC wcv-c 
led bc-fov^c 
pdsswolrd 

代 quest s-bv-ted. 


© 


The username callback gets a ''denied 
response and sets the username field 
to show the %% denied ## X mark. 


validation.js 

The user enters two matching passwords, an 
password is valid by Mikes security standards 


o 


The password callback gets an ''okay" response and 
sets the password 1 field to show the “approved" check 
mark... and enables the Register button. 


Web server 



TW»S 70 U ^ 

- m vdVidi usev^awe, a 

al'idi ^ass>wovd, ^ 
cabled Re—W WtW 


validation.js 
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usability is hard 



Great. So now neither function can 
enable the button safely. So what do 
we do now? Go back to synchronous 
requests? What a pain... 


Good usability is a pain to create. 

No matter how you cut it, building an application 
that’s highly usable is hard work. In this case, we 
added asynchrony to make Mike’s registration 
page more usable. Users can keep typing in their 
information while the server’s validating their 
username and password. 

But now all that asynchrony is creating some 
problems. What we need is a way to know when 
both the username and password are valid. Then— 
and only then — we can enable the Register 
button. We need a way to monitor the status of 
each field and make sure something happens only 
when both fields are approved. 
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A monitor function MONITORS your 
application... from OUTSIPE the action 

We need a monitor function. That’s a function that monitors certain variables or 
parts of an application, and then takes action based on the things it’s monitoring. 



validation.js 




B 〒/ usc 如 lSWu S 0 

,Sh ^ a or div^tly 

solved m ^ ucs ^ ahd 1 

^spohscs, i-t see whats 

9 °' h 9 ° h ^ ^quests 

\rcsp0hscs. 





Wfcov.. I 七褊 ^ ov, 



E 站 ftdSe 


Can you figure out what a checkFormStatus() monitor function should do? You’ll also need to call 
that function. Where in your code should that happen? If you’re not sure, think about it for a while... 
and then turn the page for a few helpful hints. 
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monitor your users 


You call a monitor fuwctiow whew action 
MlftHT need to be taken 

Monitor functions are usually used to update a part of an application or page that 
depends on several variables. So you call the monitor when you think it might be 
time to update a page... like when a username or password comes back approved. 

Right wow, the username and password callbacks directly 
update the Register button's status 

The problem we’re having now is that in showUsernameStatus () and 
showPasswordStatus (), we’re updating the Register button. But neither of 
those functions really have all the information they need to update that button. 


showUsern^eStatus^ 


if (usernameRequest.responseText 


okay' 


document•getElementByld("username，，）.className = "approved"; 

document.getElementByld("register").disabled = false; 

else { 

// code to reject /^ername and keep Register disabled 



sh owPasswordStatusO 


== "okay") 

passwordl.className = "approved"; 

document.getElementByld("register").disabled = false; 

else { 

// code to reject password and keep Register disabled 




▲十 一 丁二:二 “ vaW，aj f 

to see ^ stt ^ i\\t 

? a _ d t al I£ k 此 ^ w 如'蛉 
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Lefs have the callbacks run the monitor function 


So instead of directly changing the button status, we can change our callback 
functions to run the monitor function. That way, it’s not up to either callback to 
figure out what status the Register button should be in. 


showUsern^eStatus^ 


if (usernameRequest.responseText 


okay' 


document • getElementByld ( "username，，）• className = "approved' 

-doc-a-motRyTd er M ) . di-saj^-1 od — #-q1cg^ 《 - 

^checkFormStatus(); 

else { 

// code to reject username and keep Register disabled 




Remove the lihcs ih both 
^allbadks that updated 

"the s-t^-tus o-p -the 

Rcgis-tcir butW 


bo*b^ 6 allb 3 ^ s 

should ca\\ -tv^c 
mow-tov- 

ov wS*ka*bus() • 



== "okay") 

passwordl.className = "approved"; 

H°nt ^m^^-1=PyTd { M ) d i r nb-l-^d — f ^ 1 p; 

checkFormStatus(); 

else { 

// code to reject username and keep Register disabled 


..and let the monitor function update the Register 
button 


Since the monitor function is separate from either the username or 
password checks, it can get all the information it needs. The monitor 
function can check the username and password fields, and make the 
right decision about what status the Register button should be set to. 


"Tli€ rhOhi*toV" -Puhd"tioh 



TWis yb taWtA 

州 c a usev^ame ov 

^assN^/ovd > s 366c^*bcd* 



decides whclhcv- Rcgis-tcv- 
should be disabled... 
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monitors check status 


Status variables let monitors know 
whafs going oh 

We’re ready to write a monitor function to set the status of the Register 
button’s disabled property, and now both callbacks call that 
monitor. All that’s left is to have those callbacks set some status variables, 
indicating whether the username and password are valid. The monitor 
function can use those variables to figure out what to do when it’s called. 

Here’s the complete code for Mike’s app, with a new monitor function: 



Update the XHTMl page 


Validate the passwords 


Submit the form 


i*t or v^o-t, v-c 

sbll y/A 吒⑽ 

^dSSY/Ovd 七'/叫 


window.onload = initPage; 

var usernameValid = false; 
var passwordValid = false; 



^u^Cht status —•一叫 




function initPage() { // initPage stays the same } 

function checkUsername() { // checkUsername stays the same 

function showUsernameStatus() { 

if (usernameRequest.readyState == 4) { 

if (usernameRequest.status == 200) { 




y/cVc 

ou-bs\de a^Y 卜 W. 

TV^a-b 


global vav»aWes. 


I^Vc heed 

"to update 

uscirhamcl/alid 
-fov- both 
possible sewev- 

V"CSpOhSCS. 


if (usernameRequest.responseText == "okay") { 

document.getElementByld("username").className 

gQ-fe-ElcmcntByld ( M -r-ggis1s-e-r M ) . c^-i&a-b-jrod - false; 

一 ^ usernameValid = true; 

} else { 

document.getElementByld("username").className 
document.getElementByld("username").focus(); 
document.getElementByld("username") .select (); 

documeriL .-g-^LElemfen LDyId-(- M r , GgiGfeor M ) . di . sabl^ r- 

usernameValid = false; 


approved' 


denied' 



-brue : 


checkFormStatus() 




VVc …扣七 

-to 七 ^ 

s*ta*tws o-f *bV^c 

Rcys-tcv- Wtto 矜 

•m e'^ev *b^c 
*i^/clsc Wa^cs. 


function checkPassword() { 

var passwordl = document•getElementByld( n passwordl n ); 
var password2 = document•getElementByld( n password2 n ); 
passwordl.className = "thinking"; 


// First compare the two passwords 
if ((passwordl.value == "") || 

passwordl.className = "denied 

passwordValid = false; 


(passwordl.value != password2.value)) { 

n . 

This is easy h> about, but 

七 he passwords do^i wc heed -to 

update yass^dVaWd status viable. 
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Kov>C ouv CoAt should sc*b 
^^ status Rc^sW 

checkFormStatus () ; cy»dcf*t ■fo ,r wo^'rtov- 

return; 


// Passwords match, so send request to server 
passwordRequest = createRequest(); 
if (passwordRequest == null) { 

alert ("Unable to create request ’，）； 

} else { 

var password = escape(passwordl.value); 
var url = "checkPass.php?password= M + password; 
passwordRequest.onreadystatechange = showPasswordStatus; 
passwordRequest.open("GET" , url, true); 
passwordRequest.send(null); 



validation.js 


function showPasswordStatus() { 

if (passwordRequest.readyState == 4) { 

if (passwordRequest.status == 200) { 

var passwordl = document • getElementByld ( "passwordl ’，）； 
if (passwordRequest.responseText == "okay") { 


passwordl.className = "approved"; 

■fiarLnmpnt . apf.F.l { M r°gi f ^ ] q o ； 


'denied' 


passwordValid = true; 

else { 

passwordl.className = 
passwordl.focus(); 
passwordl.select(); 

^ecumont *gQtElQmQfltByld( M ro^i 

passwordValid = false; 參 


This is just |ik c ihc 





叔 us password... 


)-■. di s ajo 1-ed—~ true; 


checkFormStatus(); 




… 如 d -tlich ^all -the 

rwoK>i-to\r 



AH *tWis V^as *to do 

*,s i\\t W status 

vavislolcs.- 


function checkFormStatus() { 

if (usernameValid && passwordValid) { 

document.getElementByld("register").disabled = false; 

} else { 

document.getElementByld("register").disabled = true; 

a makes emc d 侁 。 sc m a . 


… 3hd set 
— Rc^is-ick- 
but-fcohs s-btus 
3 ^^o\rdihg|y. 
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test drive 




Tesr DriVq 


Finally! But does it all work? 

Make sure your version of validation.js matches the version shown on the last two pages. You 
should have two new global variables, an updated version of checkPassword (), two 
updated callback functions, and a new monitor function, checkFormStatus (). 

Load everything up. Try out the scenarios you worked out for the exercise from page 205. Do 
they still break the page? If not, you’ve solved Mike’s asynchrony problems! 



f 1 f ? 




wtw 


Register 








a valid a^d mvalid 

passwoird, Rcgis-tcv- is disabled. 


Register 
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Can you explain what a monitor 
function is again? 

Sure. A monitor function is just a 
function that monitors your application. So 
for Mike’s registration page, the monitor 
function is monitoring the state of the 
username and password variables, and 
it’s changing the form to match the current 
status. 

Q/ I thought monitor functions usually 
ran automatically, like at set intervals. 

Sometimes they do. In systems 
where you have a lot more threading 
capability—the ability to run a process in 
the background—it’s common to have a 
monitor function execute periodically. Then, 
you don’t have to explicitly call the monitor, 
which is what we do in the username and 
password callbacks. 


Relactoring cocte is 
pulling out common 
parts and putting 
tkose parts into 
a single, easily- 
maintainalile function 
or metkoct. Relactoring[ 
makes code easier to 
update and maintain. 



Why didn’t you declare 
usernameValid and passwordValid in 
initPage()? 

You could do that. But if you 
do declare the variables inside 
initPage (), be sure not to use the 
var keyword. usernameValid and 
passwordValid need to be global 
variables. 

Variables declared outside of any function 
(with or without var) are global. Variables 
declared inside a function, but without var, 
are also global. And variables declared 
inside a function, with var, are local. It’s a 
bit confusing, that’s for sure. 

In fact, that’s why they’re left outside of any 
function: it makes it a little clearer that those 
two variables are global, and not local to any 
particular function. 

So then why aren’t 

usernameRequest and password Request 
declared there also? 

That’s actually a good idea, and you 
might want to make that change. In our code, 
we left them in checkUsername () 
and checkPassword () because 
that’s where those variables were originally 
created (back when they were both called 
request). 

Couldn’t I set the status of the 
username and password 1 fields in my 
monitor function, too? 

You sure could. In fact, that’s probably 
a good idea. That would mean that there’d 
be less CSS class-changing happening all 
over the code. Most of that display logic 
would be handled by the monitor, which 


is already dealing with the display of the 
Register button. 

Anytime you can consolidate (or refactor) 
code without a lot of ill consequences, it's a 
good idea. Cleaner code is easier to modify 
and maintain. 

Just adding in a password field 
sure made things complicated. Is that 
normal? 

In asynchronous apps, adding an 
additional asynchronous request is usually 
pretty tricky. The thing that added a lot 
of complexity to Mike’s app wasn't the 
additional password fields, but the additional 
request we needed to make to deal with 
those fields. 

And this is all just so users can 
keep typing instead of waiting? 

It sure is. You’d be surprised at how 
impatient web users are (or maybe you 
wouldn't!). Typing in a username, waiting 
for the username to get validated, typing in 
a password, and then also waiting for the 
password to get validated... that’s a lot of 
waiting. It's even worse that after all that 
waiting, the user still has to fill out the rest of 
the form. 

Saving a couple of seconds here and 
there really adds up on the Web. In fact, it 
might be the difference between keeping a 
customer and losing them. 

So what about form submits? 
There’s going to be waiting there, too, 
right? 

Now you're getting ahead! But that’s 
exactly what Mike was thinking when he 
asked for scrolling images... 
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eye candy 

And wow for our last trick... 

Mike’s got one last request. When users click the Register button, 
the images along the bottom should begin to scroll while the 
form is processing. This gives the user something interesting to 
watch while they’re waiting on Mike’s registration logic. 

Fortunately, this shouldn’t be too difficult. Here’s what we need 
to do to put this into action: 



Ahd how wc khow 

"the /?cjis*tcv- 
tu-t-ton woirks Hght 


Instead IctM 
v \a a w suWvt 

V^av>dlcv- -to tV'C 



Lets c\rcaic a 
hCw *Puh^-tioh, 
^3istcvUscvO, -to 

匕 all s<Hrol|/nr，agcsO ahd 

subr^i-t 



\/\/ c cav\ abstv-att *tV>c 

to dc U 

-t>>c Ways m-to 

av>otV^cv- 。乙 W ， 
stvolllwaysO, 3^ ^ 

tV^at >wc v>ccd to 

stvoll tV^c 
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rpen your pencil 


Do you think the request to submit the form to Mike’s server should be synchronous or asynchronous? 


Synchronous 


Asynchronous 


Why? 


Does your choice above have any affect on the scrolling of the images along the bottom of the page? 


丁 4 ahSWC,rs 仏仪 <\ucs-tiohs av-c spv-cad 

广七 SO youll 
have -to keep ircadihg h> -Pmd out i-P you 
these \righ-t， 
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synchrony blocks 

Synchronous requests block ALL YOUR 
COPE from doing awythiwg 

When you send an entire form off to be processed, you usually want that 
request to be synchronous . That’s because you don’t want users to change 
that data while the server is working with it. 

But Mike wants scrolling images while the user is waiting on the server. That 
means you need your code to run while the server is working on a response. So 
even though the request would ideally be synchronous, you need it to be an 
asynchronous request to fulfill image-loving Mike’s needs. 



This isn’t a perfect solution, but lots of times you’ve got to make this sort of 
choice: satisfying the client’s needs even when the result is a little less than 
ideal. Mike’s willing to let users mess around with the form, if they really 
want to, while their request is being processed. He figures they won’t do 
that, though, because of the scrolling images. They’ll be too busy thinking 
about which movie review they want to check out when they’re logged in. 


First wc mo longer need a "submit" button 


A “submit” button in XHTML submits a form. And since we no 
longer need the Register button to submit the form, we can make it 
a normal button. Then, we can submit the form in our JavaScript. 



TKc or'15'mdl VCV-SlOh 

sViov/h v/ay katk oy \ ㈣ e I 纪 2*. 


registration.html 
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Second, we need to register a new event handler 
for the button's oweliek event 

Now we need to attach an event handler to that button. We’ll call 
the function we want to run registerUser (), and we can 
make the assignment in ini t Page (): 


function initPage() { 

document•getElementByld( n username n )•onblur = checkUsername; 
document•getElementByld( n password2 n )•onblur = checkPassword, 
document • getElementByld (’'register，，）• disabled = true; 

document.getElementByld("register").onclick = registerUser; 


dallkadk ^t\\ 
Y/n-tc \x> 七 ^ , 

Rc^s-tcv- Wtbw s 
0Y\t\\tV eve 灼七 . 



Third, we need to send aw ASYNCHRONOUS 
request to the server 

Finally, we need a new event handler function. This function needs 
to get a new request object, and send it to the server. And this 
should be an asynchronous request, so we can animate and scroll 
those images while the user is waiting. 



validation.js 


^ text oh -the 

butxoh -to pv-ovidc d Irttle 



TWis is all 

y\CY/ todt- 



function registerUser() { 

document • getElementByld (’'register，，）• value = "Processing. 
registerRequest = createRequest () ; ^ i 

if (registerRequest — null) { oMt- 

alert("Unable to create request .")； ^ 

} else { 

var url = "register.php?username=" + 

escape(document•getElementByld( n username n ).value) + "&password= 
escape(document•getElementByld( n passwordl n ).value) + "&firstname 
escape(document•getElementByld("firstname ， ' ） .value) + "&lastname= 
escape(document•getElementByld( n lastname n )•value) + "&email=" + 
escape(document•getElementByld( n email n ).value) + 
escape(document•getElementByld( n genre n ).value) + 
escape(document.getElementByld("favorite").value) 
escape(document.getElementByld("tastes").value); 
registerRequest.onreadystatechange = registrationProcessed; 
registerRequest. open ( "GET" , url, true) ; — Its bo make *tw»s s^eMro^oyAS 


"&genre= M + 
"&favorite= 
+ " &tastes : 



validation.js 


registerRequest.send(null) 


W 七 tKat y/ould klotk way 
y/cVc ^onr\^ *bo 3dd 
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the customer is king 


You can suggest 
alternative ideas; 


Hang on a sec. Weve worked all this time 
to make the form super-usable, and now were 
throwing it all away just so Mike can scroll 
little movie covers across the screen? Youve 
got to be kidding! 


Usability is in the eye of the 

err... the client. 

Sometimes clients do things that don’t make sense 
to you. That’s why they’re paying the bills, and 
you’re collecting the checks. You can suggest 
alternatives to your client, but at the end of the day, 
you’re going to be a lot happier if you just build the 
client what they ask for. 

In Mike’s case, he wants to entice users with 
reviews available on his site, so he wants 
images to scroll while users are waiting on their 
registration request. That makes his form a little 
less usable, though. Now ，instead of waiting on a 
response, users can actually type over their entries. 
That could create some confusion about what 



information Mike’s system actually registered for 
that user. 


to your clients, Lut 
ultimately, you 


skould almost 

ALWAYS UU 

wkat tke client 
asked lor •“ even 


il you don’t agree 
witk tkeir decisions. 


Then again, Mike will probably just call you later 
when he realizes that for himself... and that’s not 
altogether a bad thing, is it? 


tWei^tre no ^ 

Dumb Questions 


Could I disable all the fields while the images 
are scrolling? 

That’s a great idea! Why don’t you take some 
time now to do that. Mike will love that he gets scrolling, 
and you’ll still keep the nice usability you’ve built into 
the registration page so far. We won’t show that code, 
though, so consider it a little extra-credit project. 
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asynchronous applications 


Use setlwtGrvalO to let JavaScript rim your 
process, instead of your own code 

set Interval () is a handy method that lets you pass in a function, and have 
the JavaScript interpreter run your code over and over, every so often. Since it’s the 
interpreter running your code, the function you send set Interval () will run 
even while your code is busy doing other things like, say, registering a user. 


To use set Interval () ， you pass it a function to execute and the interval at 
which the function should be called, in milliseconds. The method returns a token ， 
which you can use to modify or cancel the process. 

Here’s setlnterval () in action. 


I scdohd is IOOO 

州 illisedohds. 



t = setlnterval(scrolllmages r 50) 


TWis is i\\t 七 
you taw wsc *to tayvtcl 

•mWval 


/ 


sctlhtcwaio is the 

method itscl-p. 


Is the function you pass to 
setlnterval() a callback? 

Yes. Every time the interval you set 
passes, the function you pass in here will be 
called back by the browser. 


个 

TVie -f irst bo sctktcv-valO »s 

*to be evaluated- k "tWis 

cast, wc y/ant \i tall 

called s^oll Images, /ou leave okk 

^av-c^cscs so ka 七 JavaSoft Vill 

jus 七 i*t ov\Ct 


ri hov 

^ c ^uic ihe 

% wW h 

r ° 〜吨 is 

bo 

s ^ olt 〜士 U 3 . 

use dny valid JavaSdvip't hcv*c, 


3 Y)OV)ymnous 七 ion. 


therein 

Dumb 


are no o 

Questi 9 ns 


So I can do anything inside a 
setlnterval() callback that I can do in 
JavaScript? 

Yes, that’s right. There’s no limitation 
on what you can do inside the function. 


How many times does the callback 
happen? 

Until you cancel the timer. You can do 
that with clear Interval ()■ 


So do you write that function just 
like the callback for a request object? 

Well, there isn’t a request object 
involved, and so you don’t need to check any 
readyState or status properties. 
And there’s no server response to evaluate. 
So you just need a JavaScript function that 
does something every time it’s called. 


Why do you use the parentheses 
when you specify the function? 

Because you're not setting a property, 
like you do when you assign an event 
handler. You're actually passing code to 
the JavaScript interpreter. The interpreter 
will then execute that code every time the 
interval elapses. 


You can pass any 
JavaScript function to 
setlntervalO, and kave it 
run automatically at pre- 
cteterminect intervals. 
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multi-threading? 




setlnterval() is essentially JavaScript’s 
version of multi-threading. 

Some programming languages, like G# and Java Script, 
allow you to specify that a function be executed on a 
separate thread. If the computer has more than one GPU, 
two different threads might actually execute simultaneously. 
On most computers, the operating system executes one 
thread for a short time, then switches to another thread, 
then back. It’s sort of like driving and talking on a cell 
phone, without the risk of plowing into the guy in the big 
SUV to your left. 

In our case, the JavaScript interpreter is able to 
do two things more or less at once: keep executing 
scroll Images () every few seconds, and deal with the 
asynchronous request from our code to Mike’s web server. 
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You’re in the home stretch now. There are just a few things left to do to finish up Mike’s 
registration page... and you’re going to do them all right now. Here’s your list of things to take 
care of before turning the page: 


Add the following Ready-Bake Code for scrolling the cover images to 
validation. j s. 


function scrolllmages() { 

var coverBarDiv = document • getElementByld (’ 'coverBar ，'）； 
var images = coverBarDiv.getElementsByTagName( n img M ); 
for (var i = 0; i < images.length; i++) { 

var left = images[i].style.left.substr(0. 


P'md d\\ 
七 he 


images[i].style.left.length - 2); 
if (left <= -86) { 

left = 532; 


images[i].style.left = (left - 1) + "px 


ou 七 i"ts 
fositioh is usihft ihc 
Xt” attv-ibutc of i-ts 

style pvopeirty … 


■fr 

Cppe 


...w 如 工 


Add a line to the Register button’s event handler callback that tells the 
JavaScript interpreter to run scroll Images () every 50 milliseconds. 



^ cxplai h -this todt 
because i-ts s-tahdavd 
JavaS^\rip-t. Yo U Uyy usc ^ 
s ^lyj 仏 ough … ahd dig 
fto Head P.vst JavaS^Hp-t 
•Pov* move details. 


Write a callback function for the asynchronous registration request. 
When the callback gets a response from the server, it should replace the 
“wrapper” <div>’s content with the server’s response. You can assume 
the server returns an XHTML fragment suitable for display. 


Test your code out before turning the page. You can do this! 

Make suve you’ve yt CSS -fvorw 
Chft 饮弓 samples. The cavl.cr version 

M.kcs CSS docs^i V^avc styles 

CoMCr images. 
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exercise solution 



Your job was to complete Mike’s registration page. Did you figure everything out? Here’s how 
we finished up the page. 



function registerUser () 

t = setlnterval("scrolllmages()", 50); 

document.getElementByld("register").value 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert("Unable to create request .")； 

} else { 

var url = "register.php' 

registerRequest.onreadystatechange = registrationProcessed; 
registerRequest. open ( "GET"url, true); 
registerRequest.send(null); 


function registrationProcessed() { 

if (registerRequest.readyState == 4) { 
if (registerRequest.status == 200) { 

document.getElementByld('wrapper').innerHTML = 
registerRequest.responseText; 



function scrolllmages() { 

var coverBarDiv = document•getElementByld( n coverBar n ); 
var images = coverBarDiv.getElementsByTagName('img *); 
for (var i = 0; i < images.length; i++) { 

var left = images[i]•style•left•substr(0, images[i].style.left.length - 2) 
if (left <= -86) { 


left = 532; 


images[i].style.left 


TW»s \s i\\t Ready 
gakc Code i\\t 
last I 七 
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Tqst DriVq 


Let’s show Mike what we’ve done. 

It’s been a long, fast ride since all Mike cared about was validating usernames. We’ve added a 
lot... let’s show him what we’ve come up with. 



Aahgcd pages. 






nMDli.'CayffJinngiE-irif I 


I love it! I even like 
that when you get the 
links from the server, the 
images keep scrolling. 






■ 為： 


■■ 




■ ' i-'dLK 


"■si-in 


hmVi 


nnri 


■ ■ *¥—-■ 


_ ! 


S S^oll 


nidges 


as the 


"to the 
usev y/irts … 


…“如 sewer s 

:?r: 二 u 
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word search 




Word Search 


Take some time to sit back and give your right brain something to do. See if 
you can find the key words below in the letter scramble. Good luck! 



Word list: 

setlnterval 

Asynchronous 

Synchronous 

DIV 

Handlers 

Callback 

Thread 

Password 

Event 

Request 

Enable 
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Fireside Chats 



Tonight’s talk： Asynchronous and Synchronous 
applications go toe-to-toe 


Synchronous: Asynchronous: 

Hey there, long time, no talk. 

No kidding. Every time I call you, I get a busy signal. 

I’m a busy guy, you know? And I don’t let anything 
get in the way of paying attention to the user I’m 
serving. 

But what about all your other users? They’re just left 
waiting around? 

They’ll get their turn, too. Sometimes it’s much 
better to take care of one thing at a time, and then 
move on to the next job. Slow and steady... 

You can say that again! 

Just because I don’t let people interrupt me while 
I’m working — 

Hey, I can listen and talk, all at the same time. 
You’re the one with the one-track mind. 

One-track mind? I just make sure I finish what I 
start. 


Sure, but what if that takes 10 seconds? Or 10 
minutes? Or an hour? Do you really think people 
enjoy that little hourglass whirling around? 


I don’t seem to get too many complaints. 

Yeah, well, I’d love to sit around like this all day, but 
my users don’t like to wait on me. That’s more your 
department, isn’t it? 

Hey, enjoy your 15 minutes of fame, bro. I’ve seen 
fads like you come and go a million times. 


I bet you thought U2 was a one-hit wonder, too. I’m 
not going anywhere — except to make the Web a hip 
place again. See you when I see you... 
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Word Search Solution 



R S 

M 

O 

K 

E J U 

(LA 

V 

R 

E 

T N 1 

1 O 

R 


ALT 


U D H E 



Word list: 

setlnterval 

Asynchronous 

Synchronous 

DIV 

Handlers 

Callback 

Thread 

Password 

Event 

Request 

Enable 
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the document object model 




本 Web Page Forestry ♦ 



Wanted ： easy-to-update web pages. It s time to take things into your own 
hands and start writing code that updates your web pages on the fly. Using the Document 
Object Model, your pages can take on new life, responding to users’ actions, and you can 
ditch unnecessary page reloads forever. By the time you’ve finished this chapter, you’ll be 
able to find, move, and update content virtually anywhere on your web page. So turn the 
page, and let’s take a stroll through the Webville Tree Farm. 


this is a new chapter 
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content or structure? 


You caw change the CONTENT of a page... 

So far, most of the apps we’ve built have sent requests, gotten a response, 
and then used that response to update part of a page’s content. 



^ ihis app, wc 


h v 


il 


Hcvcs cast 代 

y；e *t^c m^cv-ttTML 


pv*opcv**tY ^ 


That s "the 乙 Ohtch 七 

hot the 

st\rud-tu\rc o( the pa^e. 


tv^c sww j m 

七 V\c d'»d. 


^ also 
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the document object model 


or you caw change the STRUCTURE of a page 


But what if you need to do more than just change the content of a <div> or replace 
the label on a button? What if an image needs to actually move on a page? How 
would you accomplish that? 



You caiVt change the structure of a page, 
duh! Why would anyone bother writing 
XHTML in the first place if someone 
could just move things around? 


Your users can’t change your XHTML. 

The structure of your page is defined in your 
XHTML, and people viewing your pages definitely 
can’t mess around with that structure. Otherwise, 
all the work you’d put into your pages would be a 
total waste of time. 


But what about the browser? You'd 
think it would be okay if the browser 
moved stuff around... because we can control 
that with our JavaScript, right? 



O 


0 


The browser CAN change your 
web page’s structure 

You’ve already seen that the browser lets you 
interact with a server-side program, grab 
elements from a page, and even change 
properties of those elements. So what about 
the structure of a page? 

Well, the browser can change that, too. In fact, 
think about it like this: in a lot of ways, the 
structure of your page is just a property of 
the page itself. And you already know how to 
change an object’s properties... 
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document object model 


browsers use the Pocumewt Object Model to 
represent your page 




The browser doesn’t see your XHTML as a text file with a bunch of letters and 
angle brackets. It sees your page as a set of objects, using something called the 

Document Object Model, or DOM. 


And everything in the DOM begins with the document object. That object 
represents the very “top level” of your page: 



― - ^ 

TKc doC.ur»»cy\*t object 
乙 oyrts … s ybru6 七 uve 



classes.html 


of vouv- ,s 

dc-f'mcd m Youv- >(HTMU 





<html> 


ipt sr 


<scr 


js” /> 


’’siteLog 


sre 


/> 


P n 9 




The document object is just an OBJECT 



s "tylc ahd cvch 

uAt aiiac^d h> 
your sWW is a | so 

i h -the D_. 


You’ve actually used the DOM, and in particular the document object, several 
times. Every time you look up an element, you use document: 


var tabs 


document.getElementByld("tabs").getElementsByTagName("a") 

^document ( 

T\\t do 匕七 objedt 




In fact, every time you treat an element on a page like an object and set 
properties of that object, you’re working with the DOM. That’s because the 
browser uses the DOM to represent every part of your web page. 


currentTab.onmouseover = showHint; 
currentTab.onmouseout = hideHint; 
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currentTab.onclick = showTab 
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the document object model 



T]ie ‘oitnent • • Up Cl^se 

Everything in the web browser’s model of your web page can be 
accessed using the JavaScript document object. You’ve already seen the 
getElementByld() and getElementsByTagName() methods, but there’s a 
lot more that you can do with the document object. 


M 

jr 

m 


/ 


document 


Fmd an eiemenl by its ».ci- aUr.oute « 

Youve already seen how cretEl 咖。 
of cake to fmd an element in y 0ur we ^ 仰 ◦ makes ^ a P iece 
attribute: 7 Web P a ^ e using the element^ id 

var tabElement = 么 Cht 

document getEl^o w »^ ^ id of ^ bs « 

^^^^etElementByld(»tabs») .value 


iet the rool 


[ement ot a document — 

You can grab the <html> root element from an XHTML 

"cument using the documentElement property: 

var htmlElement = document .documentElement, 

TV>c voo-t clcwcn-t m an )<HT 亂 
(\\t is aUays <VvW> 


Create new parts ot a page 


You can use various create... methods on the document object to add elements and textto 
your page: TW«s dvca-bcs a ^ element ^~^ c 

var mylmage = document . createElement ( - img-) ; ^ add H 

^ vouv- 

var favShow = document.createTextNode("Bones"); 


-Hnd nodes by their tag 

If you want all the elements of a certain type, for example, all the images you 

can use getElementsByTagName (). This returns an array, so you^ll nLd to 
loop through the array to get a particular element: 

var allDivs = ^ al1 ^ <div> dc^is. 

document 


var firstPara 


= M Clements. 

getElementsByTagName ( M div M ) ； 


-丄 上丄上 OUJTcUlcl = 

document.getElementsByTagName ( M p M ) [◦] ; 

all ihc <f» Usi a^ay. 
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xhtml to dom 


Here's the XHTML that you write. 


When you’re creating a web page, you write XHTML to represent the structure 
and content of your page. Then you give that XHTML to the browser, and the 
browser figures out how to represent the XHTML on the screen. But if you want 
to change your web page using Java Script, you need to know exactly how the 

browser sees your XHTML. 

Suppose you’ve got this simple XHTML document: 


<html> 冬 



<head> 


<title>Webville Tree Farm</ title> 


</head> 




<hl>Webville Tree Farm</hl> 


<p>Welcome to the Webville Tree Farm. We're still learning 
about CSS, so pardon our plain site. We just bought 

<a href= n http : //www.headfirstlabs.com/books/hfhtml/ n > 

Head First HTML with CSS & amp; XHTML</a>, though, so expect 
great things soon. </p> 

<p>You can visit us at the corner of Binary Boulevard and 
DOM Drive. Come check us out today !</p> 


</body> 

</html> 
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...and here's what your browser sees 

The browser has to make some sense of all that markup, and organize it in a way 
that allows the browser — and your JavaScript code — to work with the page. So the 
browser turns your XHTML page into a tree of objects: 


“Welcome to the Webville Tree 
Farm. We’re still learning about 
CSS, so pardon our plain site. We 
just bought” 




TV^ese are all ?arts 

oUk P_ 代 

七 ㈣ dotted? M m 

為叫 ^avt>tulav ov-dev-? 


“You can visit us at the corner of 
Binary Boulevard and DOM Drive. 
Come check us out today!” 







How would YOU order and 
relate these different parts of 
the DOM tree? 
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the dom is relational 


O 


o 


Now wait just a second. 

The browser just turns everything 
on my page into a bunch of little 
pieces? And what do trees have to do 
with any of this, anyway? 



The browser organizes your page into a tree 
structure, with a root and branches. 

When a browser loads an XHTML page, it starts out with 
the <html> element. Since this is at the “root” of the page, 
<html> is called the root element. 

Then, the browser figures out what elements are directly 
nested within <html>, like <head> and <body>. These 
branch out from the <html> element, and they have a 
whole set of elements and text of their own. Of course, the 
elements in each branch can have branches and children of 
their own...until an entire page is represented. 

Eventually, the browser gets to a piece of markup that has 
nothing beneath it, like the text in a <p> element or an 
<img> element. These pieces of markup with nothing under 
them are called leaves. So your entire page ends up being 
one big tree to the web browser. 

So let’s look at that tree structure again, but this time, with 
some lines added to make the connections between the 
a little clearer. 


man 
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Your page is a set of Natelobjccts 


the document object model 


ay>d elements ave 
vefvewted m *tKc vett 



You can visit us at the corner of 
Binary Boulevard and DOM Drive. 
Come check us out today!” 


bii ^ 略 ― 



4 , , AS ah 一 
t 二丄 “ 屮 … Wd . 


the XttT/WL that 

this tv-cc v-cpv-cschts. ^ 二 


^ clc ^i 


<html> 


<head> 

<title>Webville Tree Farm</title> 

</head> 

<body> 

<hl>Webville Tree Farm</hl> 

<p>Welcoine to the Webvill Tree Farm. We 1 re still learning 
about CSS, so pardon our plain site. We just bought 

< a href="http://www.headfirstlabs.com/books/hfhtml/ n > 

Head First HTML with CSS &amp; XHTML</ 

a>, though , so expect great thing s soon.</p> 

<p>You can visit us at the corner of Binary Boulevard and DOM 
Drive. Come check us out today!</> 

</body> 

</html> 



you are here 


237 










































parents and children 


thereiare no o 

Dumb Questi9ns 


Do I need to use a request object to write JavaScript code 
that uses the DOM? 

Nope. The browser handles creation of the DOM tree and 
exposes all the methods of the document object automatically. In fact, 
even when you’re not writing JavaScript at all, browsers still use the 
DOM to represent your page. 

Q/ So if the DOM doesn’t use a request object, is it really part 
of Ajax? 

Depends who you talk to. Ajax is really just a way of thinking 
about web pages, and a whole slew of other technologies, that helps 
you achieve interactive pages in really usable ways. So the DOM is 
definitely a part of that. You'll use the DOM a lot in the next couple of 
chapters to build interactive and usable apps. 

Q/ What about all that DOM Level 0 and DOM Level 2 stuff? 
Am I going to have trouble with Internet Explorer again? 

All modern browsers are compatible with the World Wide Web 
Consortium's (W3C) DOM specification, but the specification leaves 
some decisions up to the browser designer. The designers of IE 
made a different decision about how to build the DOM tree than a lot 
of the designers of other major browsers. But it’s not a big problem, 
and with a few more utility functions, your code will work on all major 
browsers, including Internet Explorer. 


It looks like you called some parts of the markup 
"children ■” So an element can have “child elements ”？ 

Yes. When the browser organizes your XHTML into a tree, it 
begins with the root element, the element that surrounds everything 
else. Then, that element has an element within it, like <head> or 
<body>. Those can be called nested elements, but in DOM, they’re 
called child elements. 

In fact, you can think of the DOM tree as a family tree, with family 
terms applying everywhere. For example, the <head> element is 
the parent of the 〈 title 〉 element, and most <a> elements have 
children: the text label for the link. 

You’re throwing a bunch of new terms around. How am I 
supposed to keep up with all of this? 

It's not as hard as it seems. Just keep the idea of a family tree 
in mind, and you shouldn't have any trouble. You've been using 
terms like root, branch, and leaf for years. As for parent and child, 
anytime you move away from the root, you’re moving towards a child. 
The only term that may be totally new to you is “node,” and we’re just 
about to take a look at that... 
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WRite ypvR 0m 触 RictipHaRS 

What good is looking at a bunch of definitions? This is Head First, and we want your brain 
working, not just your eyes. Below are several entries from a Web Dictionary, with some of the 
words in each definition removed. Your job is to complete each entry by filling in the blanks. 

hodc* o-f markup, s\aCM Bs By\ cleric 灼七 

ov- 火 t. The <a> elemeirrt is 扣 _node, while 


A o( mav-kup 七 ha 七 
has_sudh as 
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匕 0 灼七伙七 ， like ov *tc^*tual 
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ihc w ttcad Purs-t ttT/l/IL Wiih CSS f ><ttT/^L w is 
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a\rc 


thild : A^y mav-kup -that is_ 
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P.«t ttT/l/|L with CSSf ><ttT/^L w is the _ 


*tKc <a> element "the <p>s *m *tiVis r^av-kup 
_o-f *thc <body> element 


Also k^OW)r\ as ： t\)\\d Y\odc 


A^y pic^c of mav-kup 
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Fav-m/^ dnd <h*tm|> is *thc pa\rc^*t o-f 
*tKc_element Also k^o>wir\ as: 

paveirrt element parent 灼 ode. 




■ 

body 


iv 

仑 

1 





A bv-a^dh 


is a 


o*f 


1 

Itml 


< 



elements d^d So *thc u body w bv-a^h 

is all *thc elements by\A _-the 

<body> clcmc 灼七 m *tlic *brce. 


\TOO 七 The t\tn\tY\{, \y\ 

a _ihai_all 

o*thc\r clcmc^*ts. |r\ )(ttTML, *t^C roo 七 
clcmc^*t is always_. 


<XX><XX><»X><XXX«>0<>0<XXXXXXXXX>0'XXX><"X><>'>»<X><X>00<XXXX»<XXXXX><X>0<X><X><X»>»<XXX«>0<>0<XX>0<XXX><><>0'XXX><"X><>'>»<XXX>00<>0<XKKXXXXXX><X>0<X><XX><»X><XXX«>0<>0<XX>0<XXX><><>0'XXX><»X><>'>»<X><X>00<XX><>XXXXXXX><X>0<X><"XX»>»<XXX«>0<>0<XXXXXXX><><XX>0<X><"X><>'>»<X><X>00<>0<><X»<XXX><><><X>0<X><XX><»>»<XXX«>0<>0<><XXXXXX><><>0'XXX><"X><>'>»<X><X>00<>0<>000<XXX><><><X>0<X><X><X»X><>'><X«>0<>0<><X>0<XXX><><>0'XXX><>0<X>'X>00<X><>0<>0<><><X>0'XXXX>0'XXX><>0<X»>»00<X><>0<>'XXXX>0'XX><><>0'XXX><>0<X>'>»<XXX>00<XX><»0<XXXXX>0'XXX><XX><»X><>'><X«>0<>0<XX>0<XXX><><>0'XXX><"X><>'>»<>'X> 


y\o 匕 hild\rch 

匕 Wild 

dhild\rc^ 

ui^dcv- 

匕 。 irrtdmcd 

o*tiiC\r markup 

*twt 

dol lectio 灼 

sm^lc 

dodumci^'t 

clcmcirt 

doirrtdms 

<body> 

y\o 



11 … 仏 “I 釙 ks. 
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build your own dom 


iterpen your pencil - 

It’s time to load markup trees into your brain. Below is an XHTML document. Your job is 
to figure out how a web browser organizes this markup into a tree structure. On the right 
is the tree, ready for you to fill in its branches and the relationships between each piece. 
To get you started, we’ve provided spaces for each piece of markup; be sure you’ve filled 
each space with an element or text from the XHTML markup before showing off your 
DOM tree to anyone else! 

<html> 

<head> 

<title>Binary Tree Selection</ title> 

</head> 

<body> 

<p>Below are two binary tree options :</p> 

<div> 

Our <em>depth-first</em> trees are great for folks who 
are far away. 

</div> 

<div> 

Our <em>breadth-first</em> trees are a favorite for 
nearby neighbors. 

</div> 

<p>You can view other products in the 

<a href= n menu .html ff >Main Menu</a>. </p> 

</body> 

</html> 
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—US 

Make suve 70U o^ct au xn 

vMW，? s 崎七！ 


“depth-first” 








div 


1 “Below are two binary 
tree options:” 




title 





em 



r 


div 



P 



This ohc is "t\ri^ky. 
Sec i-P you e ， ay, ^iauve 
out li^ 

ahd ii J s shoirt 



► 加 swers on pa^e 243 . 
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nodes and relationships 



WRite ypuR 0_ «teB RictipHaRB 

* > » * • « •參 


Below are several entries from a Web Dictionary, with some of the words in each definition 
removed. Your job was to complete each entry by filling in the blanks. 


A o( mav-kup 
has ⑽ tW\\d>r^ sudh as 

a 灼 element wi*tK 灼 0 _ 

like o\r *tc^*tual 

dd'bd- Also k 灼。 ㈧ 灼 as: Ica-f Y\odt 


hodc* A^y o( mav-kup, sudh as clcmc^*t 

ov- The <a> elemeirrt is a 灼 eleme^-b y\oAt } while 

妞 c w ttcad Pursi ttT/l/IL y/ith CSS { 沖丁亂 ” is 
七 e>^b v\ode. 


a 




fiiVild: A^y o( mavkuf is 
by a^o*tiicv- pic^c markup. The w ttcadl 
p.\rst HT/l/IL With CSS f ><HT^L W is the 匕 Ud 
o^- *thc <a> dement and -the <p>s *m *this markup 

^hildveh_ o( -the <body> element 


av-c 


Also as ： 乙 hi Id 的 ode 


A^y o-f mav-kup -tha-t 
dorrtd’ms o 七 her mavkuf . <hl > is *the 

pav-c^*t o-f *thc *twt 'Wcbvillc T\rCC 
Fa\rm W , and <h*tr»\|> is *thc pa\rc^*t o-f 
*thc <body> dement Also k^ow^ as ： 

pavwt clcw\c^*t> pav-c^*t 灼 ode. 






1 

■ 

K)dy 







1 

Itml 


< 



A is a 』▲的 o-f 

elements and dorrteirrt. £o *thc w body w b\randh 
is all *thc clcmc^*ts *tc>c*t u^dev _*thc 
<body> elemerrt ’m *thc brtC- 


\TOO 七 clcmc^-t- The elemerrt m 

a do 乙 umeyrb 七 ^|| 


o*thc\r elements. |)r» )(HTML, 七 he v~oo 七 
elemeirrt is always <h 七你 l> . 
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dynamic puzzles, anyone? 


Lcfs use the POM to build a dynamic app 

Now that we know a bit about the DOM, we can use that knowledge to make 
our apps do even more interesting things. Let’s take on a project for the Webville 
Puzzle Company. They’ve been working on a bunch of new web-based games, 
and they need help with their online Fifteen Puzzle. 



usc\rs 


"PviZZU% 


M y/M -to lei 

^ ，les 釙 0 一 withih 

tHc puzzle. 


S 口㈣ U 


WeVe not replacing content we're movimn it 

In a Fifteen Puzzle, you can move a tile into the empty space, which then creates 
a new empty space. Then you can move another tile into that new empty space, 
and so on. There’s always one empty space, and the goal is to get all the numbers 
lined up in sequential order, like this: 



丁 he humbeirs ai / 

go ih io I 1 ?. 

This is a wihhihg boavd. 
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AU Ajax apps 

neect to responct 

DYNAMICALLY 


First, you re rambling on about trees. Now, 
were playing games. What gives? And what 
does any of this have to do with Ajax? 


We need to move those tiles around... 
and that requires the DOM. 

This is a perfect example of needing the DOM. We 
don’t want to just change the content of a table, or 
replace some text on a button or in a <p>. Instead, we 
need to move around the images that represent a tile. 

Webville Puzzles is using a table with four rows and four 
columns to represent their board. So we might need to 
move an image in the third row, fourth column to the 
empty space in the third row, third column. We can’t 
just change the inner HTML property of a <div> or 
<td> to get that working. 

What we need is a way to actually grab an <img>, and 
move it within the overall table. And that’s where the 
DOM comes in handy. And, as you’ll soon see, this is 
exactly the sort of thing that Ajax apps have to do all the 
time: dynamically change a page. 



to users. 


Tke DOM lets you 

CHANGE a page 

witkout reloactingf 
tkat page. 



What specific steps do you think you’ll 
have to take to move an <img> from 
one cell of a table to a different cell? 
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puzzle xhtml 


You start with XHTML 


To really understand how the DOM helps out, let’s take a look at Webville 
Puzzles’ XHTML, and see what the browser does with that XHTML. Then we 
can figure out how to use the DOM to make the page do what we want. 

<html xmlns="http :// www.w3.org/1999/xhtml"> 

<head> 

<title>Webville Puzzles</title> 

<link rel="stylesheet" href="css/puzzle.css" type= M text/css 


丁 heme’s ⑽ JavaSdv-ipt 

/> yci, bui well v\ttd 

<script src= n scripts/fifteen. js M type= "text/ javascript n X/script> some soov\. 6fo dhedd 

扣 d ddd 3 "to 

whidh well 
build "th\roujhou't 七 his 
^hap-tev-. 


</head> 

<body> 

<div id= M puzzle"> 

<hl id= M logo">Webvilie Puzzles</hl> 
<div id= M puzzleGrid"> 

<table cellspacing="0" cellpadding 
<tr> 

<td id="celll1 M > 

<img src= M images/07\png" alt 
</td> 

<td id="celll2"> 


TV\c fuzJc 

vc^vcsc^*bcd 3 

<-tablc> clew ⑼七 . 


= M 69" height= n 69" 

Badh -table u\\ is labeled with 扣 id. 



alt="11" width="69" height="69" / > 


<img src="images/06.png" alt="6" width="69" height="69 
</td> 

<td id= M celll3"> 

<img src="images/14.png" alt="14" width="69" height= M 69" / >' 
</td> 

<td id= M celll4"> 

<img src="images/ll.png 
</td> 

</tr> 

<tr> 

<td id= M cell21"> 

<img src="images/12.png 
</td> 

<td id= M cell22"> 

<img src="images/e mpty.png 
</td> 

<td id= M cell23"> 

<img src="images/05.png 
</td> 

<td id= M cell24"> 

<img src="images/13.png 
</td> 

</tr> 



tile is a 

^ si ^le <iry»3> W i-thi h 
3 sih 9lc -bblc cell 


alt="12" width: 


69" height="69" / > 

__^ 〆 


also •、州等 


alt="empty n width= M 69" height="69" / > 


alt="5" width="69" height= M 69" / > 


alt="13" width="69" height="69" / > 


... etc 

</table> 
</div> 

</div> 
</body> 
</html> 






caty 

vow 


I <html> 

I <script src=’'" ■ 

i js w /> I 

<img 

src=”siteLogo!| 
I png” A 1 


fifteen-puzzle.html 
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rperi your pencil 


Go ahead and draw what you think the DOM tree for fifteen- 
puzzle.html looks like. This time, though, you don’t have to put 
the root element at the base of the tree. You can put it anywhere 
you want: the top, the bottom, or to one side. 





There isn’t any request being made in this puzzle, is 


Q/ So this isn’t Ajax at all, is it? 


there? 


No, at least not right now. The program is all client-side. 


Well, that gets back to the “What is Ajax?” question. If 
you think Ajax apps are only ones that make requests using 


XMLHttpRequest, then this isn’t an Ajax app. But if you think 
of Ajax apps more as responsive, JavaScript-driven apps that are 
very usable, then you might decide otherwise. 


Either way, this app is really all about controlling the DOM... and 
that’s something that will help your Ajax programming, no matter 
what you think constitutes an Ajax app. 
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the puzzle’s dom tree 



Your job was to draw out a DOM tree for the fifteen-puzzle.htmTs 
XHTML structure and content. Here’s what we did... we started with the 
root element on the top-left, and worked our way down. Did you come 
up with something similar? 


<V>W> rod 
clement 

POM 之二 


kr 


TW»s \s a tot 

v\odc object- 


Although -this doesn’t 
look rwuth like 3 {xtt 
you 匕如 s-ti|| 
see the \root, 

扣 d leaves... and how 

all "these nodes avc 

^rcla-tcd -to eadh othev-. 



^rd^r is still pircs^vcd, as elc^is 
3hd tc ^ ih exactly 七 he 

二 as thc y do 

XWT 7 WL m^lrkup. 


All these okjctls a^rc 
r,odes because *tV^ 

)<ttTML clcw»c^*b. 

Th r 

X hc 代把 actually W 

0 仏饮 ^ av-cTust like 
七 his Ohe, with -Pouv- <td>s, 

eph wiih ah <ir^g> as a cWi\d 
elemcht o4 - 從 h <id>. 


UcM <\^> vc^cscy^ts a 
—1c 七， Uc —c. 
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1 


■ 




You dv-a>w a 

POM \xtt V)0v/cvcv 
su v/awt.. 

、ake sure 
bM readable 


The exercises just keep coming! This time, you’ve got to swap 
two particular nodes in the DOM tree structure below. Your job 
is to write out exactly what steps you'd take. Don't worry about 
method names, just write out what you’d do. 



Youv- job is *to 

ou*b *to 
do *to sY/rb^ 

-bile-- 


wi ^ ihis 


ohe. 


Assume you know which table cell was clicked on, and you also V .. 

know the destination table cell. What would you do? ^ ,h 9 s 

the -Pilrst dliild o( 

1 •. CwrlrCht elc^V ov 

2 Fmd all the elc^chis 

^ 3 mcd 3 '" 

3 . 

5 .. 

YoiA cars use as ma^y wa r c 

s 七 eps as you need. 
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move that <img> 


「 your pencil 

Solution 


Your job was to write out exactly what steps you’d take. Assume 
you know which table cell was clicked on, and you also know the 
destination table cell. What would you do? 


o Get the child of the selected table cell 

You could use getElementsByTagName (), but we know that the 
<img> representing the clicked-on tile is the child of the selected cell. 
So we can use the DOM to get that child element. 


u\\ >/as tWcVtd 

<w, so ouv 

s*tav 七 … 5 ? om 七 . 



IVc dah grt io -this <img> by 
gcUihg ihe dhild of ihe 
clcdcd <id> with the D_. 


❻ Get the child of the destination table cell 

Once we start swapping things around, it’s going to be harder to keep 
the selected <img> separate from the destination <img>. So before 
we start moving things around, let’s get a reference to the <img> in the 
destination <td>, too. 





a 

<i 


c 7 ^dy 9o i 
^crc^c io iWis 
rh 9 > 






Wc a 

*to *bV>»s 



JVc just hCCC | ^ ^ 

the <ihild o-P -the 
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❺ Add the clicked on <img> as a child of the new 
destination table cell. 

We need to move the <img> in the selected cell to the destination cell. 
So we can just add the clicked-on <img> to the destination <td>’s list 
of children. 


ceft 
td 


Cdit\ add 


"this 


<iry»0> 



< 1 ^ 5 > bo fee ^dev 
i\\t tUVtA-ov\ 
-table tell a^wo\rc. 


"to -the 
^CS'tihcl'tioh 
<td> s list 

°*f 乙 hild\reh. 


Oestination ceft 
td 


img 

CUdked-on 


img 

pectination 


.c VC added ^ 


s 


费 52 在 : 

pOM ^ 


o 


Add the <img> in the destination cell as a child of the 
originally clicked-on table cell. 

Now for the other part of the swap. We need to move the destination 
<img> under the <td> that was originally clicked on. Here’s why we got 
the reference to this <img> in step 2: since there are two child <img>’s 
under the destination <td>, having a reference already makes this easy. 







|v/oyf 七 he 
av-c sy/a\>\>cd- 




Hey, Ive got a much better way, 
and I don't need any of this DOM- 
DOM stuff to do it! You just... 



O 0 


一 :: 


















































change or move? 



...get the src property of 
the first <img> / and swap it out with the src 
property of the second <img> All you need is a 
temporary string, and youre done. No DOM, no 
new syntax. Nice, huh? 


Do you want to CHANGE an element or 
MOVE an element? There’s a big difference. 

You could definitely write code that simply swaps out the 
values of the two <img> 5 s src properties, like this: 

var tmp = selectedlmage•src; 
selectedlmage•src = destinationlmage.src; 
destinationlmage•src = tmp; 

The problem with this is that you’re actually just changing 
the properties of an image, and not moving those images 
around on the page. 



丁 Wis dodc 
sy / 平 

七如。 ways. 


So what’s the big deal with that? Well, what about the other 
properties of each image? Remember that each <img> 
had an alt attribute? -t-l n 

he yfidih, l - I / 

<img src= M images/14 .png" alt="14 n ^ pv-opev-f-j 1 

width=’’69 n height= n 69" /> jus-fc like ,4-r S / , ^9^ 

If you change the src attribute, you’re only changing a 
part of the <img>. The rest would stay the same... and 
then the alt attribute would not match the image! 



What you need to do is swap the entire the (£il c 养 2J 

<img> objects. That way, each <img> keeps its ciiiHbu-ic ( u l 午 ") 

properties. The image doesn’t change, but the 
location of that <img> in the DOM tree (and on 
the visual representation of the page) does. 
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JavaScript & DOM Magnets 

You’ve already figured out what needs to happen to swap two tiles. Now 
it’s time to turn those general steps into actual code. Below is the skeleton 
for a new function, swapTiles(). But all the pieces of code have fallen to the 
ground... can you figure out how to complete the function? 


function swapTiles 


LI] 


selectee 


appendChi Id. 


1 destinationCell ― ■ 


| clestinat 

ionCell 




tedlm 



selectedCeJ .^1 


lectedCe. 




firstChild 



rstChild 
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parentNode is read-only 



JavaScript & DOM Magnet Solutions 


It’s time to turn those general steps from page 250 into actual code. Below 
is the skeleton for a new function, swapTilesO. Your job was to put the pieces 
of code into a working function. 


function swapTiles( 

I selectedCell ■ 

r 

| destinationCell| 

{ 








1 ^ es tinationimaa^^B 

— 

destinationCell 

鲁 

」 







firstChild 


selectedCell 


This gc-ts s 

io 

"the -two 

wap... 


io s 


By\d this swaps 
the *bwo iw^cs. 


1 destinationCell ■ 

1 a PPendChild^l 

( 

| selectedlmage ■ 

• 


■—— r 





What about all that parent stuff? Is there not 
a parent property for each element, or node, or 
whatever? We could set the parent property of 
selectedlmage to destinationCell, and vice versa for 
the destinationlmage. 


O 


Every node has a parentNode property... 
but the parentNode property is read-only. 

Every node in a DOM tree — that’s elements, text, even 
attributes — has a property called parentNode. That 
property gives you the parent of the current node. So for 
example, the parent node of an <img> in a table cell is the 
enclosing <td>. 

But in the DOM, that’s a read-only property. So you can get 
the parent of a node, but you can’t set the parent. Instead, 
you have to use a method like appendChild (). 
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appendChildH adds a new child to a node 


appendChild () is a method used to add a new child node to an element. So 
if you run destinationCell. appendChild (selectedlmage) ， you’re 
adding the selectedlmage node to the children that destinationCell 
already has: 


how 



^y\y. 




destinationCell.appendChild(selectedlmage) 


^ppchdChildO adds hodcs -to 
the Chd the s list 

or dhildv-ch. 


A new child gets a new parent... automatically 


When you assign a node a new child, that new child’s parentNode property is 
automatically updated. So even though you can’t change the parentNode property 
directly, you can move a node, and let the DOM and your browser handle 
changing the property for you. 



Dumb Quest! 


ons 


So I can use all the DOM methods 
from my JavaScript automatically? 

That’s mostly right. There are a few 
exceptions that well look at soon, but for the 
most part, the DOM is yours to use from any 
JavaScript code you're writing. 

And a DOM tree is made up of 
nodes, like elements and text, right? 

Right, but don’t forget about attributes, 
too. A node is pretty much anything that can 
appear on a page, but the most common 
nodes are elements, attributes, and text. 


And a node has a parent and 
children? 

All nodes have parents, but not all 
nodes have children. Text and attribute 
nodes have no children, and an empty 
element with no content has no children. 

What’s the parent of the root 
element? 

The document object. That’s why 
you can use the document object to find 
anything in your web page. 


Are there other methods to add 
child nodes like appendChild()? 

There sure are. Well be looking at lots 
of those in the next chapter. 

Why is this better than changing 
out the sre property of an <img>? 

Because you don't want to modify 
the image displayed; you want to move 
that image to a new cell. If you wanted an 
image to stay the same, with its alt tag 
and height and title, you’d change 
the sre property. But we want to move the 
image, so we use the DOM. 
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name or id? 


You can locate elements by wame or byii 


If you think about your page as a collection of nodes in a DOM tree, 
methods like getElementByld () and getElementsByTagName () 
make a lot more sense. 

You use getElementByld () to find a specific node anywhere in the tree, 
using the node’s id. And getElementsByTagName () finds all elements 
in the tree, based on the node’s tag name. 








html 




title 


| “Webville Puzzles” 




head 











link 


script 


TWwb a S—c t\t^i 

based oy. its —C value. 




\ 




ovals vcpvcsch-t the 
aUiributc hodcs. Ah aUvibu-t( 
y^odc has s ahd value. 



id="puzzle" J 


document. getElementByld (''puzzleGrid ’’）； 

■T" 



This gets 2LCITO o\r r^ove 
clcw h ts based oh the *ba 
"those clcmchts. 



Watch it! 

getElementByldQ 


is Element, without 
an “s”，because it 
returns one element 
getElementsByTagName 
is Elements, with an “s ”， 
because it can return more 
than one element. 


has seveval 
^ttv-ibu-tes <^f 

its owh. 
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the document object model 




Go ahead and write the code for an initPage() function. You need to make sure that every time 
a table cell is clicked on, an event handler called tileClick() gets run. Well write the code for 
tileClickQ later, but you may want to build a test version with an alert() statement to make sure 
your code works before turning the page. 


► i^iswers on tire next pa^e. 



Here are a few questions to get your left brain into gear. Answer 
each before turning the page... and once you’re done, you might 
want to double-check your code for initPageO above, too. 


1. Should the event handler for moving a tile be on the table cell 
or the image within that cell? 

table cell (<td>) image (<img>) 

2. Why did you make the choice you did?. 


3. How can we figure out if an empty tile was clicked on? 


4. How can we figure out the destination cell for a tile? 


► 加 swers on pa^e 261 . 
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test drive 


§DLyiiOH 


Your job was to write an initPage() function that set up the event handlers for the Fifteen Puzzle. 
What did you come up with? Here’s what we did: 


Remember -to assi^ i\\t mitPajcO 

window, onload = initPage; ^ ^ov/.o^load event 

戶二先 丫 c Uaic -the <div> with -the -tabic 

function initPageO { 3hd U\h wc war>t bo aiia^ ha^dlm io. 

var table = document•getElementByld (’ 'puzzleGrid ”）； ^ — ^ 

var cells = table . getElementsByTagName ( f, td n ) ; 

for (var i=0; i<cells.length; i++) { VVe y/a^*t cvev-y <*td> m *taWe. 

var cell = cells [i]; 

Fov- cadh dell... 


cell.onclick = tileClick, 


...assign *t»lcCI»tkO "to 


function tileClick() { 

alert("You clicked me ! n )； 


built S simple cvch-fc 
hahdlcv -to iesi tUy out. 




Tqst DriVq 


Add initPage() ， tileClick()，and swapTiles() to a script called fifteen, 
js. Be sure you reference the file in your XHTML, and try out the 
Fifteen Puzzle with the event handlers on each table cell. 


CVitk a tell- 


… 扣 d you should 
3^ ^ sle^i bo 
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TaWe Cells ExposeJi* 

This week’s interview: 

Interview with a new parent 

Head First ： So I hear you’re a new parent, <td>? 

<td >： That’s right. I’ve got a sweet little <img> to call my own. 
Head First ： So is this your first child? 

<td >： Well, it depends on who you ask. Some browsers say that 
<img> is my first child, but others think I’ve got a lot of empty 
children floating around. 

Head First ： Empty children? 

<td >： Yup. You know, empty spaces, carriage returns. It’s 
nothing to worry about. 

Head First ： Nothing to worry about? That sounds pretty 
serious... you might have more children, and that’s no big deal? 

<td >： Relax ， it’s all in how you handle it. Most people just skip 
over all those nothings to get to my flashy little <img>. 

Head First ： This is all pretty confusing. Do you think our 
audience really understands what you’re talking about? 

<td >： If they don’t know ， I’ll bet they will soon. Just wait and see. 

Head First ： Well... hmmm... I guess... I guess that’s all for now. 
Hopefully we’ll make some sense of all this, and get back to you 
soon, faithful listeners. 




Dumb Questions 

Why do you have the puzzleGrid id on a 
<div>, and not on the 〈 table 〉 itself? 

DOM Level 2 browsers and Internet Explorer 
handle tables, and CSS styles applied to those 
tables, pretty differently. The easiest way to get a 
page with a table looking similar on IE and Firefox, 
Safari, etc., is to style a <div> surrounding a 
<table>, instead of the 〈 table 〉 itself. 

Since it’s easiest to style an element with an id, 
we put the puzzleGrid id on the <div> we wanted 
to style: the one surrounding the 〈 table 〉 cell. 

Q/ So that’s why you used getElementByld() 
to find that <div>, and not the actual <table>? 

Right. We could have put an id on the 
〈 table 〉， too, but it's not really necessary. The 
only thing in the puzzleGrid <div> is the table we 
want, along with all those clickable cells. So it was 
easier to just find the <div>, and then find all the 
<td>’s within that. 


What do you think <td> is talking about in the 
interview above? Are there any functions we’ve 
written or will write that might need to worry about 
those “nothing” children that <td> mentioned? 


you are here ► 
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where } s the empty tile? 


Can I move the clicked tile? 

Now that the basic structure is in place, it’s time to get the puzzle working. 
Since a tile can only be moved to the empty square, the first thing we need 
to figure out is, “Where’s the empty square?” 

For any clicked-on tile, there are six different possibilities for where the 
empty tile is. Suppose the user clicked the “10” tile on the board below: 




T\\t usev- 
cUcd 七 k 
w lO 七 lie/’ 



:^|terpen your pencil 


There are two more possible situations related to the position of 
the empty tile. Can you figure out what they are? 
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sharpen your pencil 

Solution 


Here are a few questions to get your left brain into gear. Answer 
each before turning the page... and once you’re done, you might 
want to double-check your code for initPageO above, too. 


1. Should the event handler for moving a tile be on the table cell 
or the image within that cell? 


table cell f<td>l 


image (<img>) 


2. Why did you make the choice you did? 

3. How can we figure out if an empty tile was clicked on? 

4. How can we figure out the destination cell for a tile? 



Well, first of all, I think we 
should put the event handler 
on the table cell, not on the 
image itself. 


O 


Joe: Why? The user’s clicking on “7,” not the second tile on the third row. 

Frank: Well, they’re clicking on the table cell that image is in, too. 

Jill ： So suppose we put the handler on the image. And then when a user clicks 
on the image... 

Joe: ...we swap that image out with the empty square... 

Jill: Right. But the handler’s attached to the image, not the table cell. 

Frank: Oh. I see. 

Joe: What? I don’t get it. 

Frank: The event handler would move with the image. So every time an image 
gets moved, the event handler moves with it. 

Joe: So? 

Frank: Well, we’re going to use the DOM to figure out where the empty square is in relation to the 
clicked-on image, right? 

Joe: I guess so. What’s that got to do with the handler on the image? 

Frank: If the handler’s on the image, we’ll constantly have to be getting the image’s parent. If the 



handler’s on the cell, we can avoid that extra step. We can just check the cells around the clicked-on cell. 


Jill: Exactly! We don’t need to move to the image’s parent cell in our handler. 

Joe: So all this is to avoid one line of code? Just asking the image for its parent? 

Jill: One line of code for every click. That could be hundreds of clicks... or even thousands! Have you 
ever worked one of those puzzles? It takes some time, you know. 


Joe: Wow. I’m not even that clear on how we’d find the empty square in the first place... 
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all in the family 


You caw move around a POM tree using FAMILY 
relationships 

Suppose you wanted to find out the parent of an <img> or get a reference to the next <td> 
in a table. A DOM tree is all connected, and you can use the family-type properties of the 
DOM to move around in the tree. 

parentNode moves up the tree, childNodes gives you an element’s children, and you can 
move between nodes with nextSibling and previous Sibling. You can also get an 
element’s f irstChild and lastChild. Take a look: 


document•getElementByld("puzzleGrid").firstChild 


TK'is yb a *bo 

七 he <dW> ^ 

ac*bs clcw»C\r\*t s 
?ivs*t tWild- 



pawiiNodc vcad 0 ^ ; You 



^'Id/Vodes irctuirhs a^ay 
oj all the dhild hod« oh av! 


clcmcht hodc. 


table 



You tViam -tKcsc poperbes 
{jo 50 as deep as you ^ced- 

Ca^rcU! If youir node uses lots O-P 

th f c do 十卜 ahd , it 

3 士 patty havd -to vead. 


vcWrts i\\t 於 ode 

*m same ovdev *bKa*t nodes 

y/cv-c AtcUrtd "m youv )<ttTML. 

, / 
ft? 3 Pl ^Sbli -9 
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:^l|^rpei your pencil 


Below is a DOM tree and some JavaScript statements. In the JavaScript, 
each letter is a variable that represents the matching node in the DOM 
tree. Can you figure out which node each statement refers to? 



document.getElementByld( M y n ); 
g.parent; 

document.getElementByld( M y n ).nextSibling; 
a.firstChild; 

c. parent.parent; 

d. firstChild.lastChiId; 
c.previousSibling; 
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use meaningful element ids! 

- your pendl 

Solution 


Below is a DOM tree and some JavaScript statements. In the 
JavaScript, each letter is a variable that represents the matching 
node in the DOM tree. Can you figure out which node each 
statement refers to? 



document.getElementByld( n y n ); 
g.parent; 

document.getElementByld( n y n ).nextSibling 
a.firstChild; 

c. parent.parent; 

d. firstChild.1astChild; 


t 




a 


hull 


c.previousSibling; 


TK'is is a *br •㈣ 齡尺⑽山矿 

*tV^c ov-dcv- m 

七 k VOM \xtt *tV^c ordtr 

七 dcdav-cd m i\\c yMTML- 
Smtc »s kclov/ t, 

JavaStv-'»\>*t v-c-tuv-hs a 


a 


t 



Those are awful names for elements. 
Why in the world would you name your 
nodes with just letters? 
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Use descriptive names for your elements 
and your id attributes. 

When you’re writing XHTML, the element names 
are already pretty clear. Nobody’s confused about 
what <div> or <img> means. But you should still use 
descriptive ids like “background” or “puzzleGrid.” You 
never know when those ids will show up in your code, 
and make your code easier to understand... or harder. 

The clearer your element names and ids, the clearer your 
code will be to you and other programmers. 
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:% Sharpen your pencil 

Solution 


There were two more possibilities for where an empty tile could 
be on a puzzle grid. Did you figure out what they were? 




Wcbviik Puulct 




i- ■ 




TV uscv 
cUcd 七 he 
W I0 t.lc " 




V) - 

YThe empty square could be to the lef H 

■In this case, the tile to the left has an “8” in it. 


2 


The empty square could be below 

It’s not below “10.” There’s a “2” there. 


4 


The empty square could be above. 

In this case, the empty square is above “10. 


55 


3 


The empty square could be to the right. 

AT is to the right of “10.” 


5 


The.empty square, isw't mt to.fbe. tlk.. 

Qwly.tife. ⑽ (f.fQ ■ . 识 wpty.sq ⑽ re . 你 w. fee.wappM 


Wc^VC ^0*t *to rv\akc SUVC a t»lc 

summed 1 >y o*tKcv _-〜切 

t ， | C s. \i .s, locked a^d ta” 七 
be w»ovcd- 


Thc empiy.square.was clicked oh.. 
In this. tiles should, be moved ,. 


It’s possible the iile disked is 七 he 
iilc- That should ^/ 七 dause a 
sv/ap io oCCiAV, cithcv-. 
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move the tiles 


# 


t°nt ExeticiSe 


It’s time to get busy building the rest of the Fifteen Puzzle Code. Here’s your assignment: 


o Write a celllsEmpty() function. 

Given a node representing a <td>, figure out if the image in that cell is the 
empty image. To help you out, here’s the XHTML for the empty cell: 


<td id="cell22"> 

<img src="images/empty.png" alt= M empty n width="69" height= M 69" / > 
</td> 


Here’s part of the function to get you started: 



function celllsEmpty(cell) { 
var image = I 


〜 ^dl is a node m the b\roy/scv- ； s t)0M 
hrtt 七 ha 七 vcpv-cschts a <id>. 


if 


return true; 
else 

return false; 


❺ Look for an empty cell in the tileClick() event handler. 

Let’s start building tileClick (), the event handler we attached to each 
table cell. First, we need to check for an empty cell. If the clicked-on cell 
was empty, let’s show a message indicating the user needs to click on a 
different tile. 

function tileClick() { 

if (celllsEmpty (.) ) { 

alert ("Please click on a numbered tile .’，）； 
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Figure out what row and column was clicked. 

Here’s the XHTML for a couple of cells in the puzzle: 

<td id= M celll3"> 

<img src= M images/14.png" alt= M 14" width= M 69" height="69" / > 
</td> 

<td id= M celll4"> 

<img src= M images/ll.png" alt= M 11" width= M 69" height="69" / > 
</td> 

</tr> 

<tr> 

<td id= M cell21"> 

<img src= M images/12.png" alt= M 12" width= M 69" height= M 69" / > 
</td> 

... etc ... 


Given this (and the rest of the XHTML, on page 246), can you figure out 
how to get the row and column of the clicked on tile? 

var currentRow = this ..•.; l"Wt. 

JavaWi 

var currentcol = this. ； Uast ov.dC- 


vou II *to use 


o Finish up the tileClick() event handler. 

Once we’ve made sure that the empty tile wasn’t clicked, and gotten the 
current row and column, you have everything you need. Your job is to 
handle the 5 remaining possible situations for where the empty square is, 
and then if possible, swap the selected tile with the empty square. 


Fo\r the sVmg 'oy/s 
^ov\t wild/’ 

\rctu\rhS 


0^ Ac 气 

abovew 代 
灼 ot o 灼 yovi I " 


// Check above 




To get you started, here’s the code to check above the selected tile: 

f^umkev- doy\vcv-b 七 c% 七 

> if (currentRow > 1) 

var testRow = Number(currentRow) - 1; 
var testCellld = "cell" + testRow + currentCol 

The id of -the dell 

above is “dell," a 灼 d 
七 he 灼 （ duvvwtRov/ —I) 

扣 d 七 he 灼七 he duvrervt 一 

|jf sY/affcd Wes, y/cVc dov^c! 


tuirhs these h_b 饮 s 

stvmgs whch thcyVc added 

togetheir with ahothev- si^a. 




return; 


var testCell = document•getElementByld(testCellld); 
if (celllsEmpty (testCell) ) { 七七 ^ 七七 d || 

swapTiles (this, testCell) ; oh its id 

..see i-f its h\t e 你 ft/ 

...ahd the 灼 swap out the du\rvch*t 

dell dhd the s^uairc- 

The rest of tileClick () is up to you. Refer back to the different 
possibilities you have to handle from page 265, and good luck! 
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did you move them? 



t°^£ E%edciSe 


Your job was to build the celllsEmpty() function, and then complete the clickTile() event 
handler. Did you figure everything out? Here’s what we did: 


function celllsEmpty(cell) 

var image = ^cell fir s t Ch i 1 d / 
if ( image.alt == M empty 
return true; 
else 

return false; 



TV k 七 t\\\\A tacM 

-tabic dell _ 


y.. ) y The empty image has dh alt 

tag J 




src= images/empty.png " 〕 



function tileClick() { 

if (celllsEmpty( this )) 

alert ("Please click on a numbered tile .，'）； 
return; 

} Be suve *bo ycWv' ^ 




iilcdickO is 1. 

& S /批 起 


iilc. 


cm? 切七 ，lc 心 6l»6kcd 


OY\- 


var currentRow 
var currentCol 


this id_ 

this. id 



charAt^j 4) 
,Qh^rA.t; .(5.) 


// Check above 
if (currentRow >1) { 

var testRow = Number(currentRow) - 1; 
var testCellld = "cell" + testRow + currentCol; 
var testCell = document•getElementByld(testCellld) 
if (celllsEmpty(testCell)) { 

swapTiles(this, testCell); 
return; 
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Make suve that wcVc hot 
Oh "the bo*t"(jorr» v*ow. 

// Check below 
if ( currentRow < 4 ) { 

var testRow = Number(currentRow) + 1; 
var testCellld = "cell" + testRow + currentCol; 
var testCe11 二 document•getElementByld(testCellld); 
if (celllsEmpty (testCell) ) { ^ /-f the ia^ci tc\\ is 



6(ti tell OY\t vov/ dov/n, 

•m sdme toliAwm. 


swapTiles (this, testCell); 
return; 



swap. 


卜士 look 岣 




s\dc. Make sure '代 

// Check to the left 'm toluw^- 

if (currentCol > 1) { 

var testCol = Number (currentCol) - 1; 
var testCellld = "cell" + currentRow + testCol; 
var testCell = document • getElerr^entByld (testCellld); 
if (celllsEmpty(testCell)) { 

swapTiles (this, testCell); 
return; 



Rhd ihc ^11 ohc dolu^ 

ovc ^ ^ "the s 如 d OW . 



Sec i-f tell 

so, sv/d\> a^d v-cW^. 


Ea^h of these ^s«-bdow ; 

lc+t, 3hd Hght—follow the 

saw patteirh. 


// Check to the right 
if (currentCol < 4) { 

var testCol = Number(currentCol) + 1; 
var testCellld = "cell" + currentRow + testCol; 
var testCell = document•getElementByld(testCellld); 
if (celllsEmpty(testCell) ) { 

swapTiles(this, testCell); 
return; 

} |-f y/c ^o*t ^cv*c, £.l»tkcd—or\ 

t，lc \sr^i 加 \> 切，扣 (Tits ⑽七 
bo square. 

// The clicked-on cell is locked _ .,, 

alert ("Please click a tile next to an empty cell."); « • 丄 l J i . . . aodCK, 

p y so t^y khow what -to do. 
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the dom lets you move things 


Wow, that was a lot of code. Am I 
supposed to understand all that? 

It is a lot of code, but if you walk 
through things step by step, it should all 
make sense to you. There’s not a lot of new 
stuff in there, but there’s definitely more 
DOM and positioning than you've done up to 
this point. 

Q/ And all of this is DOM code? 

Well, there’s really no such thing as 
DOM code. It's all JavaScript, and lots of it 
does use the DOM. 

So which parts use the DOM? 

Anytime you use a property that 
moves around the tree, you're using the 
DOM in some form. So f irstChild 
and previous Sib ling are 
DOM properties. But code that uses 
getElementByld () is also using 
the DOM because that’s a property on the 
document object, document is the 
top-level object of a browser’s DOM tree. 


Tke DOM is great 

lor cocte tkat 
involves positioning 
anct moving noctes 
arounct on a page. 


tKereicir© no ^ 

Dumb Questions 


Is it safe to assume the id of a table 
cell has the row and column in it? 

If you have control of the XHTML, like 
we do, it's safe. Since the Webville Puzzles 
company set up their XHTML so that table 
cells had those handy ids, we were able to 
figure out a cell’s position by its id. If you had 
a different setup, you might need to figure 
out the cell's position relative to other cells 
and rows. 

We could do that with the DOM, too, 

right? 

You bet. You'd probably be 
using some sort of counter, as well as 
previous Sibling to figure out how 
many <td>’s over you are. And you’d need 
parentNode and similar properties to 
see which row you were on. 

So this DOM stuff can get pretty 
complex, can’t it? 

It can, very fast. Although lots of times, 
you'll only need to get as complex as we had 
to for the Fifteen Puzzle. In fact, with just the 
properties you’ve already learned, you're 
halfway to being a DOM master! 

Halfway? What’s the other half? 

So far, we've only moved around 
nodes in the DOM. In the next chapter, well 
look at creating new nodes and adding those 
to the tree on the fly. 


Q/ Back to that code... so the 
firstChild of a table cell is always the 
image in that cell? 

That’s the way celllsEmpty () 
is written right now, yes. Can you think of a 
case where an image would not be the first 
child of a table cell? 

If an image isn’t the first child of a 
table cell, that screws things up, doesn’t 
it? 

It sure does. 

Well, didn’t we do the same thing 
in swapTiles(), back on page 254? We 
assume the image is the firstChild there, 
too, right? 

Exactly right. So would that 
assumption ever be false? 

Who’s asking the questions here, 
anyway? 

Maybe we should actually test out the 
fifteen puzzle, and see what happens. 
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Tqst DriVq 


Open your copy of fifteen.js, and add the code for celllsEmpty() and 
tileClick(). Make sure you’ve got initPage() and swapTiles() working ， 
too. Load things up. Does the puzzle work? 


卜卜 t 亡的 

\io\A usuall'y 
*tW»s wcssa^c- 


No 你 attev" what tile 

you di 6 k, you get 
this alcvt message. 



Here’s the XHTML for each table cell in the fifteen puzzle web page: 

<td id= M cell22"> 

<img src= M images/empty.png" alt="empty M width: 
</td> 

Is there any difference between that XHTML and this fragment: 



E 從 ttdSe 


69，’ height=" 69" / > 


<td id= M cell22"ximg src="images/empty.png" alt="empty n width= M 69" height="69" / ></td> 


Take a close look at swapTiles() and celllsEmpty(). Do you see a problem related to the 
difference in the two XHTML fragments shown above? 
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what about whitespace? 


A POM free has wodes for EVERYTHING 
m your web page 

Most XHTML pages don’t have every element, from the opening 
<html> to the closing </html> crammed onto one line. That would 
be a real pain to read. Instead, your page is full of spaces, tabs, and 
returns (sometimes called “end-of-lines ”)： 

<table cellspacing= n 0 TT cellpadding= n 0▼▼> ^ 

L-iL-i<td id= n cellll n >^J 
u-ii— n-i<img src= TT images/07 .png TT 

U«4U</td> 


You've go-t \rclu\rhS, ov- Chd- 
^ -to split up the pay 

3hd it casicv- -to v-cad. 




alt= n 7 TT width= TT 69 TT height^"69 


/><rl 


You also 
Viave spates 
or ■tabs (or 
'mdic^*b3t»or\. 


,<td id= n celll2 n >^J 


I_ii_i 

iu-i<img src= TT images/0 6 .png 


alt= 


width= TT 6 9 TT height= TT 69 


/>M 



celll3">^J 


alt= n 14 n width= n 69 n height= TT 69 fT / >^r* 


celll4 TT >^J 


alt= n ll n width= n 69 n height= TT 69 


/ ><r» 


...etc 

</table>^J 


Those spaces are nodes, too 

Even though those spaces are invisible to you, the browser tries to figure 
out what to do with them. Usually they get represented by text nodes in 
your DOM tree. So a <table> node might have lots of text nodes full 
of spaces in addition to all the <tr> children you’d expect. 

The bad news is that not all browsers do things the same way. So 
sometimes you get empty text nodes, and sometimes you don’t. It’s 
up to you to account for these text nodes, but you can’t assume they’ll 
always be there. Sounds a bit confusing, doesn’t it? 


Tkere are some 
inconsistencies in 
kow browsers treat 


wkitespace. Never 
assume a browser will 
always ignore, or always 
represent, wkitespace. 
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One browser might create a DOM tree for your page 
that looks like this: 



rows av\d dells, 


Another browser might create a different 
DOM tree for the same XHTML: 


Th 


hodc hc\rc 



#text 


丁一、 七 c 乂七 bcW ayvd a^tev- 
^ an so ca^ <id> ^ a 

■ Y/Wrtcs?adc ⑽如 … 




… 七 b 七 he actual <’1 叫 > r>ode. 
ahd "then 3ho*thc\ 


1 Img ^ -ahd then ahothc^* 

, #text 鬥 細 ― 


^tm\ 




丁 W 一七 4 『％ 
o^... a lot oAr 

\s y-c^v-cscv\*tccl- 
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text nodes 


The nodeName of a text node is 

A text node always has a nodeName property with a value of “#text.” So you 
can find out if a node is a text node by checking its nodeName: 



Elerwervt oodles have d 
i^odcNarwc that’s -the 
same as -theiv- "tag 




swaptilesO and celllsEmptyO don't take whitespace 
nodes into account 

The problem with our code is that our functions are assuming that the 
<img> in a table cell is the first child of a <td>: 


function swapTiles(selectedCell, destinationCell) 

selectedlmage = selectedCell.firstChild; - - 

destinationlmage = destinationCell.firstChild; 
selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


w,|| ohly wov^k i-f 
the -fimst Child is 

<,rh 3 > 


But y/iia-t i-f -f iv-s-b 
cM\\d o-f a <td> is a 
>w^'i*tcspa^c y\odc? —^ 




irng 


#text 
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rpen your pencil 


We’ve got to deal with browsers that are creating whitespace 
nodes in their DOM trees. See if you can fill in the blanks to fix up 
the swapTilesO and celllsEmptyO functions below: 


function swapTiles(selectedCell, destinationCell) { 

selectedlmage = selectedCell.firstChild; 

while (selectedlmage._ — _ 

selectedlmage = selectedlmage._; 

} 

destinationlmage = destinationCell.firstChild; 

while (destinationlmage._ == _ 

destinationlmage = destinationlmage._ 

} 

selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


function celllsEmpty(cell) { 

var image = cell.firstChild; 

while (image._ == 

image = image._ 

} 

if (image.alt == "empty") 
return true; 
else 

return false; 


iJieretare no o 

Dumb Questions 


If the nodeName of a text node is always “#text”, how can 
I get the text in that node? 

Text nodes store the text they represent in a property called 
nodeValue. So the nodeValue for a whitespace node would be 
(an empty value), or possibly" " (two spaces). 


Shouldn’t we be checking to see if text nodes have a 
nodeValue of whitespace, then? 

In the table cells in the fifteen puzzle, there’s no need to check 
the nodeValue. Since we only care about <img> nodes, we 
don’t care about anything else. So we can skip over any node that’s 
a text node. 
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skip text nodes (sometimes) 


r ^Jharpen your pencil 

Solution 


Were you able to figure out how to skip over the whitespace text 
nodes in celllsEmptyO and swapTilesQ? 


function swapTiles(selectedCell, destinationCell) 
selectedlmage = selectedCell.firstChild; 
while (selectedlmage. hodeName == 



^ out i-P wcV got 

a ic^i hodc by 〜 外 扣 _ the 


selectedlmage = selectedlmage. hextSiblmg 




destinationlmage = destinationCell.firstChild; 
while (destinationlmage 、 nodeName == 11 ^ text 
destinationlmage = destinationlmage. wextSibliwg 


|jf Y/c VC (\oi a 七 e 乂七⑽如， move 
仫从 C W 七 s\blm5 av>d %am. 

suire you've jot opch-^uotc, 
"then the 养 symbol, -fchch "text, 

’ thch 匕 lose ^uotc- 


selectedCell.appendChild(destinationlmage) 
destinationCell.appendChild(selectedlmage) 


function celllsEmpty(cell) { 
var image = cell.firstChild, 
while (image. hodeName == 
image : 


/ + 

All 七 We o*f -tKcsc cases use 七 same 
basic pa*t*tc\nr \： as lo^ as *bV^c ⑼七 
^odt is 50 -to Y^t%i node. 

〆 




image 


if (image.alt : 

return true; 
else 

return false 


wextSiblmg 


empty' 


v/eve *tc 此 
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the document object model 



Tqst DriVq 


Update your versions of swapTiles() and celllsEmpty(). Try the puzzle 
again... you should be able to move tiles around without a problem. 



f\nn 




WdMfle 

"Pnzzh% 


丁 1 m 

bv-oYiSCVS- sn 

a \\ J 如 . 


Kow the tiles wov-k. 
IA/hi*tcsp3^c o\r hot, b\rowscv*s 
jet -to the ir^ajc, av\d skip 
ow whitcsfoidc hodes. 


Wpblill.F PdjjipK. 


胸 J _ Af h i 1 NPJl JIL 






ynzzles 


you are here ► 
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winning is the only thing 


Pid I wiw? Pid 1 wiw? 


All that’s left is to figure out when a player’s won. Then, every time two tiles are 
swapped, we can check this function to see if the board is in order. If it is, the 
player’s solved the puzzle. 

Here’s a puzzlelsComplete () function that uses the names of each image 
to see if all the tiles are in order: 

function puzzlelsComplete() { 


Fi\rsi wc get all "the <i^ 3 > 
ih the g\rid- 


var tiles = document•getElementByld( n puzzleGrid n )•getElementsByTagName( n img n ); 


var tileOrder = " "; Wlc i*tcV"a*tc ovcv *b»IC 

(L? ^ 

for (var i=0; i<tiles.length; i++) { w , 

^ - ’ hamc： h 9 

I/Vc jus-t "the ^unr»c\rid pairt, so -thats Z 
-Pv-om -^> dhav-ad-tev-s badk- 




var num = tiles[i].src.substr(-6,2); 




if (num ! 二 "ty") 


Wt doY\ t about the empty image … we 
it- Sih^c the two vctuVhcd 

tileOrder += num; by subs-t\rO -fov- the c^fty ir^aje ave u *ty w , 

^hc^k -Po\r -thai ahd i^ovc it. 

} 1^ -,Vs r,ot tKc way, add tVic (as a 如 ％) 

if (tileOrder == "010203040506070809101112131415") 


ouv* 


hash S*br 叫 . 


return true; 


return false; 


^ ^ ihe Wm ov-dev-, ihe puzdA d 。 呷 | 士 . 


Q/ substr(-6, 2)? I don’t get it. 


A negative number means start at the 
end of the string, and count back. Since "02. 
png” is 6 characters, we want to go back 
from the end of the string by 6 characters. 


Then, we want 2 characters of that 
substring, so we get “02” or “15.” So you use 
substr(-6,2). 



Dumb Quest! 


9 ns 


Q/ What in the world is that weird 
number you’re comparing the hash string 
to? 

It's just every number in the puzzle, in 
order: 01, then 02, then 03, and so on, all 
the way to 15. Since the hash represents the 
orders of the tiles, we’re comparing them to 
a string that represents the tiles in order. 


But what about the empty tile? 

It doesn't matter where the empty 
tile is as long as the numbers are in order. 
That’s why we drop the empty tile from being 
part of the hash string. 
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the document object model 


Put seriously... did I wiw? 

There’s even a special class that Webville Puzzles put in their CSS 
for showing a winning animation. The class is called “win，” and 
when the puzzle is solved, you can set the <div> with an id of 
“puzzleGrid” to use this class and display the animation. 

That means we just need to check if the puzzle is solved every time 
we swap tiles. 


function swapTiles(selectedCell, destinationCell) { 

selectedlmage = selectedCell.firstChild; 
while (selectedlmage•nodeName == "#text") { 

selectedlmage = selectedlmage•nextSibling; 


destinationlmage = destinationCell.firstChild; 
while (destinationlmage•nodeName == "#text M ) { 

destinationlmage = destinationlmage•nextSibling; 


selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


31:: 口：: 二 


if (puzzlelsComplete()) { 

document. getElementByld (''puzzleGrid") • className 


win 




lf L ihc 卩说 solved, 




Tesr DriVq 


You need to add the puzzlelsComplete() function to your JavaScript, 
and update swapTiles(). Then, try everything out. But you’ve got to 
solve the puzzle to see the winning animation... 

...good luck! 


you are here ► 
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the dom is a tool 



Half the code we used was just ordinary 
JavaScript. I dorVt think this DOM stuff is 
really all that hard... and we didn’t even need to 
use it very much, anyway. 


The DOM is just a tool, and you won’t 
use it all the time... or sometimes, all 
that much. 

You’ll rarely write an application that is mostly 
DOM-related code. But when you’re writing your 
JavaScript, and you really need that next table cell, or 
the containing element of an image, then the DOM 
is the perfect tool. 

And, even more importantly, without the DOM, 
there’s really no way to get around a page, especially 
if every element on your page doesn’t have an id 
attribute. The DOM is just one more tool you can 
use to take control of your web pages. 

In the next chapter, you’re going to see how the 
DOM lets you do more than just move things 
around... it lets you create elements and text on the 
fly, and put them anywhere on the page you want. 


Tke DOM is a great 

tool lor getting 
arounct witkin a 
wet page. 

It also makes it easy 
to : Eiiict elements 

tkat DON’T kave 

an id attritute. 
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the document object model 



DOMAcrostic 

Take some time to sit back and give your right brain something to do. 
Answer the questions up top, and then use the answer letters to fill in the 
secret message. 


This method returns a specific element based on its ID 


1 2 3 4 5 6 7 8 9 10 12 13 14 15 

This property returns all the children of an element 


16 17 18 19 20 21 22 23 24 25 

The browser translates this into an element tree 


26 27 28 29 30 31 

This element property represents the element’s container 


32 33 34 35 36 37 

This is what the browser creates for you 


38 39 40 41 42 43 44 

This element gives you access to the whole tree 


45 

46 

47 

48 

49 

50 

51 

52 








49 

27 

25 

41 

35 

28 


52 17 

8 45 

22 

7 

33 

51 

20 





13 

39 

48 

26 

33 25 10 

2 

34 








13 

46 

30 

34 

32 27 1 

1 43 
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exercise solution 



DOMAcrostic 

Your job was to answer the questions up top, and then use the answer letters to 
fill in the secret message. 


This method returns a specific element based on its ID 

1 ~2 3 4 5 6 7 8 9 10 12 13 14 15 


This property returns all the children of an element 


C W \ L V H 0 V 

16 17 18 19 20 21 22 23 


E 

24 


S 

25 


^ - This p\roPcv-ty j s 

oi hodcs. 



The browser translates this into an element tree 


/H A R ^ U P 


26 27 28 29 30 31 


This element property represents the element’s container 

PARENT 

~32 33 34 35 36 37~ 


w 6 。山 •⑽” those 


This is what the browser creates for you 

V 0 M TREE 

38 "^9 40~ 42 43 4A~ 


This element gives you access to the whole tree 



obje^-t 匕 Ohtaihs 

cwythihg else ih the J)0M brtt. 


45 

46 

47 

48 

49 

50 

51 


52 











M 

A 

S 

T 

E 

R 



T tt 

E 



D 

0 


M 

A 

N 

D 

49 

27 

25 

41 

35 

28 



52 17 

8 



45 

22 


7 

33 

51 

20 





Y 

0 

U 


M 

A 

S 


T 

E 


R 








13 

39 

48 


26 

33 

25 


10 

2 


34 








Y 

0 


U 

R 

P 


A 

i 











13 

46 


30 

34 

32 


27 

1 


43 
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7 manlpulciting th^ DOM 


My wish is your command + 



DOM 

Sometimes you just need a little control. 

It’s great to know that web browsers turn your XHTML into DOM trees. And you can do a 
lot by moving around within those trees. But real power is taking control of a DOM tree 
and making the tree look like you want it to. Sometimes what you really need is to add 
a new element and some text, or to remove an element, like an <img>, from a page 
altogether. You can do all of that and more with the DOM, and along the way, banish that 
troublesome innerHTML property altogether. The result? Code that can do more to a 
page, without having to mix presentation and structure in with your JavaScript. 


this is a new chapter 


webville puzzles 


Webville Puzzles... the franchise 


All the cool kids have been playing the Fifteen Puzzle you developed for Webville 
Puzzles. The company’s been making so much on subscription fees that they want 
a new puzzle... and they’ve come to you to build the interactivity. 

This time, the company wants something a little more educational: Woggle, an 
online word generation game. They’ve already built the XHTML, and even know 
exactly how they want the puzzle to work. 

Here’s the initial Woggle page: 



a 今 - fey j 

ctWs. TV^c letter should 

be vav>diow 


P^ycirs Cc 
io U build w 


-4. •“心 




WbsviS -p 




K J 


㈣ 


e) o 1 ? 


Subm t Word 


咖 i) 


Score: 0 


Done 


Playcv-s da>r> 
submrt 七 he 
y/ovd *to sec 
i-f iVs valid - 


… ^ sdc 
^o\r -the wov-d* 
foih-t -fo\r voy/Ci 
2 - poihts -pov- 
dohsohahts. 


f\ -tile Uy\ oY\bf be used a sm^lc time 
•m eddK v/ovd- Ot\tt *bKc tile s used ； r 

s^ould^*t be selectable uy>til a y\t^ 
v/ov-d is s*tav-*tcd- 


Used v/ovds yb 
added *to ko%. 
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manipulating the dom 



E%eftci$e 


There’s a lot to build to get Woggle working, and of course the company wants their new app 
working immediately. Before you dig into the XHTML and CSS, think about what tasks are involved, 
and what JavaScript each one will need.Try and list each basic task for which you’ll need to write 
code, and then make notes about what tools and techniques you might use for that task. 


Task 1: 
Notes: 


Task 2: 
Notes: 


Task 3: 
Notes: 


Task 4: 
Notes: 


Task 5: 
Notes: 
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four fas/cs 



Your job was to figure out the basic tasks we’d need to take care of to get Woggle working. 
Here’s what we came up with. You might have some differences in your details, but make 
sure you got these same core ideas down in some form or fashion. 


Task i : Set up the game board with random tiles 
Notes ： We heed a way to come up with a random set of letters. 
Thew weVe got to display the right image for each letter ow the 
4x4 game board.. This probably should all be dohe \y\ ah ihitPageO 
type of fuwctiow. 


boav-d 
should be 




〜 -on 

c , Mcd 

匕心 Hie, 

when WC k how 

^ r ^ ^ 

cayy d,s pl^y ihc 

H 9 ^ 


Task 2 : Clicking on a tile adds the letter to the currewt word. 


Notes ： We need m eve^t handler on each tile* The handler 
should figure out what letter was clicked, md add it to the "currewt 
word" box over on the right Thew the tile that was clicked should 
be disabled in the grid.. 


CWtV：\^ a letter 
docs *t>wo "tWmy* 



I- The Icttcv* 
gets added -to 
the 'uvveht 

wovd^ box. 


.TV \tiitr \s 
disabled m 


f\s usual v/cll ^cd 
扣 mrtPajcO io sc*t 
up CVCir\*t Vl3ir\dlcV"S 

av^d basic, faje- 



woggle.js 


Lets build 
a -Puhdt \ oy \, 
v-ahdorhiicTilcsO, 
"to h^hdlc 
the tile gvid. 



woggle.js 


I/Vcll y\ttA cvch-t 

ha 灼 dlev. Lrt’s c^ll 

it addLcticvO. 
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manipulating the dom 


Task 3: Users caw submit words to the server, 

Notes ： Whew a user clicks "Submit Word," the current word 
is sent to the server-side program. Well also heed to register 
a callback to deal with the server's response. 



\A/c 

service 
{p vvav> 




word = userWord 


request 



onreadystatechange 
updateScore; 


:: w rri 

^ sevvev vcs ? o^ds. 




submitlVoirdO t^Y\ set 
up a^d sehd a scv-vcv- 
sidc p\rog\rarn vc^ucst. 


Task 4 ： Update the score using the server"$ response, 

Notes ： Whew the server responds. weVe got to update the score, 
ahd add a valid word to the "used words" box. WeVe also got to 
remove the word from the "current word" box awd ehable the 



^.acM t'wc 
a yjord s 

all 

i\xt Wes avc 

enabled 

3 >wov*d. 



tiles again. 


window* 


u\rlttcadcv 


rri i i 


updateScore() 


wogg 


J] 

Qr\t w^ovc 
ouv* tdllbdtk- 

l/alid wovds get 
added "to this box... 

...a^d tV.c s^c yts ^dated 
^ tacM vaV.d 減土 
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css positioning 


Woggle doesn't use table cells for the tiles 

Now that we’ve got a plan, let’s look at the XHTML for the Woggle game. The 
designers at Woggle have heard some bad things about tables, so the page is structured a 
bit differently. Each tile is represented by an <a> element this time, instead of being in a 
table cell. Better for them, but that might mean a little more work for us. 

Here’s what the XHTML looks like: 


<html> 

<head> 

<title>Webville Puzzles</title> 

<link re1="stylesheet" href="css/puzzle.css" type= M text/css" / > 

<script src= M scripts/utils . js" type= n text/javascript n X/script> 
<script src= M scripts/woggle. js" type= n text/javascript M X/script> 

</head> 

<body> 

<div id="background"> 

<hl id= M logotype">Webvilie Puzzles</hl> 

<div id="letterbox"> 


^o\a should 3ir\d add 

stv-'ipi \rc-Pcv-cir\tcs. W!c II 
use utils.js (or dreatmj d 
v-cc\ucs*b object- 


■二碑:心 

spe 以 i 乙 -Puh^-tiohs. 


<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href: 
<a href= 


class="tile til"></a> 
class="tile tl2"></a> 
class="tile tl3"></a> 
class="tile tl4"></a> 
class="tile t21"></a> 
class="tile t22"></a> 
class="tile t23"></a> 
class="tile t24"></a> 
class="tile t31’’></a> 
class="tile t32"></a> 
class="tile t33"x/a> 
class="tile t34"></a> 
class="tile t41"></a> 
class="tile t42"></a> 
class="tile t43"></a> 
class="tile t44"></a> 



taA set d 十 <a>s 

oy\C v*oy/ 








</div> 

<div id="currentWord M ></div> 

<div id="submit"Xa href= M #">Submit Word</a></div> 
<div id="wordListBg M > 

<div id= M wordList"></div> 

</div> 

<div id="score">Score : 0</div> 

</div> 

</body> 

</html> 


Hcv-cs wiicv-c i\\t C\Arrtv\i 

y/ovd will 30 … 


"the U Subrwi*t ^/oV"d^ 
but-toh will go hcv-c. 


7 used 


一 … and -f mally, stove. 


<html> 

〈script 
js” A 
<img 
src=’’siteLogc 
png” /> 
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woggle-puzzle.html 














manipulating the dom 


The tiles iw the XHTML arc CSS-positiowed 

Instead of putting the tiles inside of a table, each <a> element that represents 
a tile is given a general class (“tile”）and then a specific class, indicating where 
on the board it is (for example, 


<a href= n # n class= n tile 



1 七 “ is a 

bat a^l'»c s *to all m 

{\\t 


The CSS then uses both the general “tile” class 
and the specific tile class (“t21” ， “t42” ， etc.) to style 
and position the tiles. 


This is -foir the spcdi-Pid tile. 
么 is the \ to \ n , ahd / is the 

匕 oluwm. So this is the 

乙 olumh ih -the sedohd v-ow. 


/* tile defaults */ 

^letterbox a.tile { 

background : url ( 1 . ./images/tiles.png 1 ) 120px 80px no-repeat; 

height : 80px; 
position : absolute; 
width : 80px; 



yts 栋 CSC 


/* tile positioning * 


^letterbox 

a. til 

: top : 

3px; 

left : 

3px; } 


^letterbox 

a. tl2 

: top : 

3px; 

left : 

93px; 

} 

^letterbox 

a. tl3 

: top : 

3px; 

left : 

183px; 

} 

^letterbox 

a. tl4 

: top : 

3px; 

left : 

273px; 

} 


etc 


cyrbr'/ m CSS 

-fov- catV^ 七 ile... I 厶 … all. 


This CSS sets the posi-tioh 
•Pov" ihdividual <a> that 
^Cp\rcschts a tile. 



puzzle.css 


Hmh It/ 


运 n iTrf\^ 


Download the XHTML and CSS for Woggle. 

Visit www. headf irstlabs . com, and find the 
chap ter 07 folder. You’ll see the XHTML and CSS for 
Woggle. You should add the <script> tags to woggle- 
puzzle . html, and get ready to dig into some code. 
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be flexible 



CSS-positioned? I’m not sure I 
know what that means. 

CSS-positioned just means that 
instead of relying on the structure of your 
XHTML to position something on a page, 
CSS is used instead. So if you want to 
CSS-position an <a> element, you give 
that element a class or id, and then in 
your CSS, set its left, right, top, 
and/or bottom properties, or use the 
position and float CSS attributes. 

Is that better than using tables? 

A lot of people think so, especially web 
designers. By using CSS, you’re relying 
on your CSS to handle presentation and 
positioning, rather than the way cells in a 
table line up. That’s a more flexible approach 
to getting your page to look like you want. 

So which should I use? Tables or 
CSS-positioning? 

Well, you really can’t go wrong with 
CSS-positioning, because it's the easiest 
approach to getting things to look the same 
across browsers. 

But more importantly, you should be able 
to write code that works with tables or CSS 
positioning. You can’t always control the 
pages you write code for, so you need to be 
able to work with lots of different structures 
and types of pages. 


I don’t understand how the CSS 
positioning actually worked, though. Can 
you explain that again? 

Sure. Each tile is represented by 
an <a> in the XHTML. And each <a> 
has a class attribute, and actually has 
two classes: the general class, “tile,” and 
a specific class representing that tile, like 
“t32.” So the class for the tile on the third row, 
second column would be “tile t32 ■” 

Then, in the CSS, there are two selectors 
applied to each tile: the general rule, "tile," 
and the specific selector for a tile, like “t32 ■” 
So you have selectors like a. tile, and 
a. t32. Both of those selectors get applied 
to a tile with a class of "tile t32 ■” 

The general rule handles common properties 
for all tiles, like height and width and look. 
The specific selector handles that tile’s 
position on the page. 

Why are <a>’s used for the tiles? 
They’re not links, right? 

No, not really. That’s just what Webville 
Puzzles used (maybe they’ve been checking 
out the tabs on Marcy’s yoga site). It really 
doesn’t matter what you use, as long as 
there’s one element per tile, and you can 
position that element in the CSS. 

There are a few considerations that using 
an <a> brings up for our event handlers, 
though, and well look at those a bit later. 


I don’t see a button for “Submit 
Word.” There’s just a <div>. What gives? 

You don’t have to have an actual form 
button to make something look like a button. 
In this case, the Webville Puzzle designers 
are using a <div> with a background 
image that looks like a button for the “Submit 
Word” button. As long as we attach an event 
handler to that <div> to capture clicks, we 
can treat it like a button in our code, too. 


You skould te 
atle to write 
code to work witk 

All TYPES ol 

pages •“ even il tke 
structure ol tkose 
pages isn’t kow 

YOU would kave 

done tilings* 





An event handler attached to an <a> element 
usually returns either true or false. What do you 
think the browser uses that return value for? 
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Submit word 


Update score 


manipulating the dom 



ttcvc av-c -tasks -fvom 2~ 灿 . Pm 七 
we Y\ttd *to se 七 uf 七 he board. 


"Wc dow't wawt TOTALLY random letters 


jj 


The guys in the puzzle labs at Webville Puzzles just called. They’ve decided 
they don’t want totally random letters for the board after all. Instead, they want 
letters to appear according to a letter frequency chart they’re faxing over... that 
way, common letters like “e” and “t” show up in the grid a lot more often than 
uncommon ones like “z” and 


CC 


YCS the guys -faxed ovcv- -to you. 


yoar pencil 


Let's get started. First, you need to build an 
initPageO and randomizeTilesO function. Here’s 
what you know: 

1. There’s a class for each lettered tile in puzzle, 
css. The class for tile "a," for example, is called 
“la" (the letter "I" for letter, plus the letter the tile 

represents). 

2. Webville Puzzles has faxed you a letter 
frequency table. There are 100 entries, with 
each letter represented the number of times 
out of 100 it typically appears. You need 

to represent that table as an array in your 
JavaScript. There should be 100 entries, where 
each entry is a single letter. 

3. Randomly choosing a letter from the 
frequency table is like choosing a letter based 
on the frequency in which it appears in a word. 

4. Math.floor(Math.random()*2000) will return a 
random number between 0 and 1999. 

5. You’ll need to use getElementByldO and 
getElementsByTagNameO each at least once. 

Try to complete both initPageO and 
randomizeTilesO before you turn the page. 
Good luck! 


you are here 
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board andle tile clicks 




















set up the board 



board andle tile clicks 


Submit word 


Update score 



rpen your pencil 
Solution 


Your job was to use the information on page 291 to write code for 
initPageO and randomizeTiles(). You also may have come up with 
some other JavaScript outside of those functions... how did you do? 


^^you v-cmcrwbc\r th is I’me? aot to 

wxndow. onload = ^itPage; , a || ^ 



- ^ 


var frequencyTable = new Array( 




on »v\ ouv* 



"a", 

"a", 

"a". 

"a", 

"a" f 

''a'\ 

"a", 

'' a'\ 

n b n . 

"c", 

''c'\ 

"c", 

n d n . 

n d n . 

„ d ” 

"e", 

11 e 1 ', 

''e'\ 

"e", 

"e" f 

''e'\ 

"e", 

''e'\ 

''e'\ 

"e M , 

''e'\ 

"e", 

"f ", 

„ f n. 

"g" 

n g n . 

„ h „. 

” h „. 

，， h ”， 

” h „. 

” h ”， 

，， h ”， 


n i n . 

n i n . 


n i n . 

n i n . 

n i n . 

"j" 

n k n . 

n l n . 

， T ，， 

"1", 

n l n . 

"m ", 

"m", 

"n" f 

n n n , 

"n", 

"n" f 

"n" f 

"n" f 

"o'\ 

"o" 

"o", 

11 0 " r 

"o' 

"o", 

"o' 

"o'\ 

”p n . 

n p n . 

n q n . 

n q n . 

n q n . 

n q n . 

”q n . 

n q n . 


"r", 

"r ", 

"r ' 

"r", 

"r" f 

n s n , 

"s", 

n s n , 

n s n , 

， 's n , 

n s n , 

， 's n , 

， 's n , 

n t n . 

"t n 


"u" f 

n u，' ， 

"v" , 

"v" , 

"w" , 

"x" , 

n y n . 

n z n ) 

• 

f 







ttev-e’s hoy/ y/c v-cp\rcschicd the Icticv- -P\rc«\uc^dy table. BbcM 
lettev appears m the a\rray the ^umbev o( times out of 100 
i 七 shows up *m 七 he -Pv-c^uc^dy tabic Wlcbvillc PuzzJcs -Pa^cd us. 

All m^PayO docs 

is ta\\ \rav\dow'»z^T'ilcs (； 

{jo set uf i\\t puzz-lc yr\d^ 


put *tw»s 

JavaS 咐 t •， 山 a 
… We, 叫。 參 j s . 




function initPage () { 

randomizeTiles (); 


woggle.js 


function randomizeTiles() 


Fivsi wc g^b all the <a> 
clcmchts i h -the IcUcv-box <div>. 


var tiles = document • getElementByld (’ 'letterbox，'）• getElementsByTagName ( ， ’ a ，'）； 



for (i 


0; 


< tiles.length; i++) 


f*ov tile) wc 3 v-ar\dom 
*mdc% between 0 n— 


var index = Math.floor(Math.random() * 100); 


var letter = frequencyTable[index]; 


tiles [i] .className = tiles [i] .className 


• <P 



• ahd choose a IcUcv -fvom -the 
lettev -Pvc^uchdy -table. 


+ ' l' 


letter, 


WC da 么 aw d tile. T。 〆 义 dhosc^llk/v 

do iWis, keef tlass Mme... lA/c scpa\raic cadh class u lw w letter w. , 饮 

灼 ame W\{\\ b spate- 
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manipulating the dom 


Our presentation is ALL m our CSS 

By using class names instead of directly inserting <img> , s into the XHTML, 
we’ve kept our JavaScript behavior totally separate from the presentation, 
content, and structure of the page. So suppose that for the tile in the second 
row, first column, the random index returned by Math . floor (Math . 

random () * 100 ) was 4.___ 

^=r - - ' 

The fifth entry in frequencyTable is “a”，so that tile should be an “a.” But 
instead of having our code insert the “a” image directly, and deal with image 
URLs, it just adds to the class of that tile: 


/Way ihdi^cs airc iciro-bascd ； so 

广 d W poihts -to the 5 th itcry. 
9, a ； a, a). 



<a href= n # ff class= n tile t21 

This pavt 


,h,s paH: was a\^ady ih the 
P a 9 c；s XWTML -Po^ the tile. 



TW»s ^ a ‘ 

va^aom^T'IcsO 


added 


Now we use the CSS to say how that letter is displayed: 


/* tile letters 
^letterbox a.la 
^letterbox a.lb 
^letterbox a.lc 
^letterbox a.Id 
^letterbox a.le 
... etc ... 


-k 


background-position 

background-position 

background-position 

background-position 

background-position 


Opx Opx; } 
-80px Opx; 
-160px Opx 
-240px Opx 
-320px Opx 



puzzle.css 


Now the designers have options 

Since all the presentation is in the CSS, the designers of the page can do 
whatever they want to show the tiles. They might use a different background 
image for each letter. In the case of Woggle, though, the designers have 
used a single image for all tiles, tiles . png. tiles . png. It actually has 
every lettered tile in it, each in just the right size. That image is set as the 
background image in the selector for the a . tile class. - 

Then, in each letter-specific class, like a . la or a . lw, they’ve adjusted 
the position of the image so the right portion of that single image displays. 
Depending on the position, you get a different letter. And the designers can 
change the CSS anytime they want a new look... all without touching 
your code. 


This is how wc handled the u |h 
P\rog\rcss w av\d u Dchicd w 
ih Chclptcv- 


於 cMtck out tVic CSS scl^fe>v 
(or a -tilc loatk o 於 pay 
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test drive 



board andle tile clicks 


Submit word 


Update score 




Tqst DriVQ 


Try out your early version of Woggle. 

Download the samples files, and make sure you’ve added a reference to 
woggle . j s in your version of woggle-puzzle . html. Then, load 
the Woggle main page in your browser... and load it again... and again... 



• *R3 ■ i ■ Ana h a dU / 


TU?/- 




■-T*- 'ISSliS 


wam^ 


Pnz/ 




ytm 






So 






w 吖的扣 d / s . 
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Update score 






Wc need a new event handler for 
handling tile clicks 


Next up, we need to assign an event handler to the tiles on the grid. The 
handler needs to do several things: 



Figure out which letter was clicked. 

All our handler will know about is the <a> element on the page that 
was clicked. From that, we’ve got to figure out which letter is shown on 
the tile that the clicked-upon <a> represents. 



Add a letter to the current word box. 

Once we know what letter was selected, we’ve got to add that letter to 
the current word box in the “currentWord” <div>. 


manipulating the dom 



Disable the clicked-on letter. 


We’ve also got to keep the tile that was clicked from being clicked again. 
So we need to disable the letter. There’s a CSS class for that, called 
“disabled,” that works with the “tile,” “t23,” and “lw” classes already on 


each title. 


This dass handles 
-Po\rnr»a*ttmg (ov dll tiles. 


1L 


TWis dlass 

^os»*b>ov^ c 


This dlass 

七 he Icttcv- ihats shovm. 


(^U^rpen your pencil 


There are actually a couple of things 
missing from the list above... can you 
figure out what they are? 
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a little random chaos 
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Start building the event handler for 
each tile click 


The best way to write a big chunk of code is to take things one 

step at a time. First, let’s build a skeleton for our handler. That’s 

just a function block with a name, so we can hook everything up 

and test out code as we go. p 

_ 籼 •、 以句⑽ 。七 

as y- 


Add this function to woggle . j s: 


function addLetter() { 

// Figure out which letter was clicked 


// Add a letter to the current word box 


// Disable the clicked-on letter 



woggle.js 


Tke test way 
to write a large 
piece ol code is 
to take tkings one 
step at a time. 


Wc can assign an event handler m 
our randomizeTilesO function 

Now let’s go ahead and hook up our handler to each tile. We’re 
already iterating over all the tiles in randomizeTiles (), so 
that seems like a good place to assign our event handler: 


Get eack piece 
ol code working 

BEFORE moving 

on to tke next 


function randomizeTiles() { 

var tiles = document • getElementByld ( "letterbox ’，） 

.getElementsByTagName( M a"); 
for (i =0; i < tiles.length; i++) { 

var index = Math.floor(Math.random() * 100); 

var letter = frequencyTable[index]; 

tiles[i] .className = tiles [i] .className + 

* 1' + letter; 

tiles[i].onclick = addLetter; 


l^ovi y/c s-tav-t testmg ouv everrt 
h3^dlc\r 3s y/C v/V-i-tc it 



piece ol code* 
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manipulating the dom 


Property values arc just strings in JavaScript 

So far, we’ve mostly used the className property of an object to change a CSS 
class. For Woggle, we actually added classes to that property... but what if we want 
to read that value? Suppose the second tile on the third row represents the letter “b.” 
That tile would have a className value that looks like this: 


<a href= n # n class= n tile t32 lb ff X/a> 


TW、vd v-o>w 




•Scdohd doluhrth 


Lettev^V’ 


So we’ve got a className property that has the letter of the 
tile that’s represented... how can we get to that letter? Fortunately, 
JavaScript has a lot of useful string-handling utility functions: 


substring 


substring(startlndex, endlndex) returns a 
string from startlndex to endlndex, based on 
an existing string value. 

(oo has *thc value 


vax foo = " foolish" . substring (0'3) ' w . >> 

var is = " foolish" . substring (4 , 6 ) ; % . |S Wuc 心 


Split 


split(splitCliar) splits a string into pieces 
separated by splitGha,r. The pieces are 
returned in an array. -t-l- .. 

var pieces = ” Decide, Commit, Succeed 1 ，• split ( n • i) 
alert (pieces [2] + + pieces [ 1 ] + + pieces [0 ])； 


(<^arpen your pencil 

What code v\ 


What code would you write to get the letter represented by 
the clicked-on tile? 
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manipulate those strings 



board 

Handle tile clicks 


iibmit word 

Update score 







arpen your pencil_ 

Ik Solution What code would you write to get the letter represented 

by the clicked-on tile? 

r—^ <a href= n # n class= n tile t32 lb n X/a> 

，丄 [0] [1] [2] 

ttcv-c S a t,lc clcw ^ 七 . , t 

匕 ~^ Spl'i-t-tKc classes ca^ othev- ■ tile ^^P lb 

yar tjleClass^^ 5 usm3 ^ ^ 七 

var lefterOIass s tlJeClasses [l \ …… ^ 一 ^ ，s ihe dasS} 50 二 ^ 比 

var 佩 eiter ， letto 伽 s.sub 她 gfl, Z);. ,h ^ 2. U sm 9 a 咖 ― dcx. 

/ Cl^ Wc 娜七 a sm^lc thavad*tcv o( 

I), s-tav-tmg a*t mdc^ 2 - *m lc*t*tcv-Class. So s v/i^at 

七 hat’s lc*t*tcv-Class.subs*tv*m^(l, Z). ^ v / 如七 . 





TesT DriVq 


Test out your letter recognition. 

Add the code above to your addLetter () function, and also add an 
alert () statement to display the value of tileLetter at the end of 
the function. Then reload Woggle and see if everything’s working... 





一一一 — 
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manipulating the dom 


Now you’ve got to take the clicked-on letter, and add it into the currentWord <div>. How would 
you do that? Oh, and by the way... you can’t use the innerHTML property on this one! 



You keep saying innerHTML is bad. 
Whafs so wrong with it? It sure 
seems to be pretty handy... 


innerHTML forces you to mix XHTML 
syntax into your script... and offers you 
no protection from silly typos, either. 

Anytime you set the innerHTML property on an 
element, you’re directly inputting XHTML into a page. 

For example, in Marcy’s yoga page, here’s where we 
inserted XHTML directly into a <div> with JavaScript: 

contentPane.innerHTML = "<h3>" + hintText + n </h3 >〃； 

But that <h3> is XHTML. Anytime you directly type 
XHTML into your code, you’re introducing all sorts 
of potential for typos and little mistakes (like forgetting 
a closing tag for a <p>). In addition to that, different 
browsers sometimes treat innerHTML in different ways. 


If at all possible, you should never change content or 
presentation directly from your code. Instead, rely on 
CSS classes to change presentation, and ... what can 
you use from your code to change structure without 
introducing typos or misplaced end tags? Figure out the 
answer to that, and you’re well on your way to a solution 
for the exercise above. 


you are here ► 


299 










content and structure 



board 

Handle tile clicks 

iibmit word 

Update score 






Wc need to add cowtcwt ANP structure to 
the "currewtWord" <div> 


When a player clicks on a letter, that letter should be added to the current 
word. Right now, we’ve got a <div> with an id of “currentWord,” but 
nothing in that <div>: 

<div id="currentWord n X/div> 


So what do we need? Well, we’ve got to insert text in that <div>, but 
text doesn’t usually go directly inside a <div>. Text belongs in a textual 
element, like a <p>. So what we really want is something more like this: 


<div id="currentWord"> 
<p>Current Word</p> 
</div> 


Use the POM to change a page's structure 


You already know that using code like this isn’t that great of an idea: 

var currentWordDiv = getElementById (" currentWord") ; ^^ 

currentWordDiv.innerHTML = n <p>" + tileLetter + "</p>"; 

But there’s a way to work with the structure of a page without using 
innerHTML: the DOM. You’ve already used the DOM to get around 
on a page, but you can use the DOM to change a page, too. 

From the browser’s point of view, here’s the part of the DOM tree 
representing the currentWord <div>: 




?厂> ao you 
Wo ^ d 

a PpChd -to i«t? 



We need to create something that looks more like this: 


丁 ^ pOM sees <dw> as 

a 於 element earned ^ 

^ *«a 

a value 、 Wdovd. 



c to add a <j» 
dcnr»Ch*t as a ^hild o( the <div>... 


二 二 
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manipulating the dom 


Use crcatcElGmcwtO to create a POM element 

Remember the document object? We’re going to use it again. You can call 
document. createElement () to create a new element. Just give the 
createElement () method the name of the element to create, like “p” or “img”: 



dr\d vrtuvhs 扣 okjct*t 

七 ha 七 v-c\>v-cscr\*b POM 

element you asked 


v 

^^-tcElc^Ch-feO is 

3 ^c-thod o-P -the 
do^cr^i object. 





You pass *bV^c 七 

士州 ⑼ *t *to *biie method- 


T .^ S Vlh 9 is ihSChSitivc. 

Y^u 亡如 use “p ” 。浐 w p. w 


Leave o^*f *tV^c 士 . 

w <\» ” 


%l|^rpen your pencil 


The createElementO method is part of the document element, which 
contains everything else in the browser’s DOM tree. Where do you 
think the new element is added in the DOM tree? 



It’s a child of the document element at the 
top of the DOM tree. 



It’s a leaf node at the bottom of the DOM tree. 



Nowhere. The new element doesn’t become 
part of the tree. 
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where do these nodes go? 



•「… rr 


Solution 


The createElementO method is part of the document element, which 
contains everything else in the browser’s DOM tree. Where do you 
think the new element is added in the DOM tree? 


I document 



It’s a child of the document element at the 
top of the DOM tree. 



It’s a leaf node at the bottom of the DOM tree. 



Nowhere. The new element doesn’t become 
part of the tree. 


You have to TEUthc browser where to 
put awy new POM nodes you create 

Web browsers are good at following directions, but they’re not so great at 
figuring things out on their own. When you create a new node, the browser 
has no idea where that node should go. So it just holds on to it until you 
tell the browser where the node goes. 




That works out pretty well, too, because you already know how to add a 
new child node to an element: with appendChild () . So we can create a 

new element, and then append it to an existing element as a new child: TV’ S ^ , 

b> use as a 

var currentWordDiv = getElementByld("currentWord"); 
var p = document. createElement ( p ) ; <p> At t + 

currentWordDiv.appendChild(p), 


’ll >/办七 
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f mallv，>/c add <?> 
as a t\\\\d -tV^c <dw>. 
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So can we do the same 
thing with a text node? Just 
create a new node, set the text, 
and add it to the <p> element? 


O 


You can create elements, text, 
attributes, and a lot more. 

The document object has all sorts of helpful 
create methods. You can createElement (), 
createTextNode(), createAttribute(), 
and a lot more. 

Each method returns a new node, and you can 
insert that node anywhere into your DOM tree you 
want. Just remember, until you insert the node into 
the DOM tree, it won’t appear on your page. 



e 


text 


document 


crea±eTexi ： iMoae| 


^\ll i\st crtait 


^eaieT^ihlodeO takes the text 4v- 
the hodc as its single av-gumcht 




ocument 


J\y\ attv-ibu-tc v\odt bclo^s oy\ ar\ 
element... -t^aVs up -to you -to take 



^v*catcAtt\ributcO takes ah attv-ibutc 
Mmc av\d value as a\rgu^chts. 



E%ettctSe 


See if you can complete the code for adding a letter to the currentWord <div>. Add your code 
into the addLetterQ event handler, and try things out. Does everything work like you expected? 
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twice is not nice 
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§OLpi\OH 


Your job was to finish up adding letters to the currentWord <div>. Were you able to 
finish the code up? Were there any problems? 


function addLetter() { 

var tileClasses = this.className.split("") 

var letterClass = tileClasses[2]; 

var tileLetter 二 letterClass.substring(1,2) 



the v-ight <div>... 


var currentWordDiv = document.getElementByld("currentWord") 

var p = document.createElement( M p n ); _ 

currentWordDiv.appendChild(p); 

var letterText = document.createTextNode(tileLetter); 
p.appendChild(letterText); 


...tv-catc av>d add 
a - 

… thch Cvcsic 

add -the Iciicv' 
"to -that <p>. 



But it only works tke lirst time! 



woggle.js 



— 囫屬 


Ckk a IcUcv-, a^d \i appears m 

bo%. 


But dick a se^ohd Icttcv -； ar>d 
wthmg shows up. IVha-t gives? 
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DOM Magnets 


Let’s try and figure out what’s going on with Woggle and our 
addLetter() event handler. Use the DOM magnets below to build the 
DOM tree under the currentWord <div> for: 


...the first time 
addLetter() is called: 


...the second time 
addLetter() is called: 


."the third time 
addLetter() is called: 


| div Af id= M currentWord M ") | 

1 div B^Jcl= ,, currentWord , '^®[ 

| div ■^^"currentWord") 



Mm 


—d - — 



there ^ are no o 

Dumb Questl9ns 


When I call appendChild(), where 
exactly is the node I pass into that 
method added? 

appendChild () adds a node as 
the last child of the parent element. 

What if I don’t want the new node 
to be the last child? 

You can use the 

insertBefore () method. You pass 
insertBefore () two nodes: the 
node to add, and an existing node that the 
new node should precede. 


Didn’t we use appendChild() to 
move elements in the last chapter? 

We sure did. Whatever node is 
passed to appendChild (), or 
insertBefore (), is added as 
a new child node to the parent you call 
appendChild () on. The browser 
moves the node if it’s already in the DOM 
tree, or adds the node into the DOM tree if 
it’s not part of the tree already. 

What happens when you append or 
insert a node that already has children of 
its own? 


The browser inserts the element you 
insert and all of its children into the DOM 
tree. So when you move a node, you’re 
moving that node and everything underneath 
that node in the DOM tree. 

Can you just remove a node from a 
DOM tree? 

Yes, you can use the 

removeNode () methods to remove a 
node completely from a DOM tree. 
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nodeName and nodeValue 
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DOM Magnet Solutions 


Let’s try and figure out what’s going on with Woggle and our 
addLetter() event handler. Use the DOM magnets below to build the 
DOM tree under the currentWord <div> for: 


… the first time 
addLetter() is called: 


...the second time 
addLetter() is called: 


...the third time 
addLetter() is called: 


Some nodes have a nodeName，others have 
a nodeValue, and still others have both. 

The first time addLetter () gets called, we create a new 
text node. But on future calls, we need addLetter () to 
change the text in that node. We can do that using the text 
node’s nodeValue property. 

ov a 七 







Every DOM node has two basic properties: nodeName and 
nodeValue. For an element, the nodeName is the name 
of the element. For an attribute, nodeName is the attribute 
name, and nodeValue is the attribute value. And for a text 
node, the nodeValue is the text in the node. 



currentWord' 


) 
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manipulating the dom 


The nodeName and nodeYalue properties tell you about nodes 

node node type wodeName wodeValue 




You’re ready to finish up the section of addLetter() that gets a 
letter from a clicked-on tile, and adds the clicked-on letter to the 
currentWord <div>. See if you can write the rest of the function 
now... and don’t forget to test things out! 







•seq apou e U3jp|!ip Aueiu mol| noA s||ai L|i6u3|.sapoNPI!Lp 
*apou pue 'uaip|!ip s^pou e p Aejje ue sujniaj sapoNPII^p.^pou 4 u;h 
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add a letter 
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Using what you learned about the DOM in the last two chapters, 
were you able to finish up this section of addLetterO? You should 
have come up with something like this: 


function addLetter () { 

var tileClasses = this.className.split(""); 

var letterClass = tileClasses[2]; 

var tileLetter = letterClass•substring(1,2); 


var currentWordDiv = document•getElementByld( n currentWord n ); 

The -Piv-st thihg wc t\tt& "to 


if (currentWordDiv.childNodes•length == 0) { 

var p = document.createElement("p"); 
currentWordDiv.appendChild(p); 
var letterText = document.createTextNode(tileLetter); 


p.appendChild(letterText); 


do is see i-P -the ^umh-tlVbv-d 
<div> has 3hy dhild\reh d!\reddy> 

TV^is is *biiC CoAt wc 
had bc-fo\rc* Now tiVis 
Co&t 0 K\ly v-ur\s 七 he 

C.uv-y"cn*bWbydi <dw> 
y\0 dillld K^odcs. 



else { 


If 七 he du\r\rcr>tlVo\rd <div> has Aildk •⑶… 


var 


C 七七 k <\», a^d 


p = currentWordDiv. firstChild; … ^ 七 ^ tK'tldi o-f 


var letterText = p.firstChild; 


七 <f> 


letterText.nodeValue += tileLetter; <- ~^ …如 d add the hew letter io 

the text hode. 


tkereictre no ^ 

Dumb Questi9ns 


What is that childNodes property 
again? 

childNodes is a property 
available on every node. It returns an array 
of all of a node’s children, or null if there 
aren’t any children for that node. And since 
it’s an array, it has a length property that 
tells you how many nodes are in the array. 


Can’t I just keep up with whether or 
not addLetter() has been called, and use 
that as my conditional? 

No, that won’t always work. It’s true 
that the first time addLetter () is 
called, you need to create a <p> and text 
node. But if the player submits a word, and 
the board is reset, addLetter () would 
again need to create a new <p> and text 
node. So just checking to see how many 
times addLetter () has run won't be 
enough. 


I wrote my code a different way. Is 
that okay? 

Sure. There are usually at least two or 
three different ways to solve a problem. But 
you need to be sure that your code always 
works... and that it’s not creating DOM nodes 
unless it needs to. If both of those things are 
true, then feel free to use your own version 
of addLetter (). 
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Hey, what about text nodes 
full of whitespace, like we ran into last chapter. 
Isn’t it bad to use currentWordDiv.firstChild 
and p.firstChild like that? Couldn't those first 
nodes be whitespace nodes? 


When you control the DOM structure, 
nothing happens that you don’t specify. 

When the browser creates a DOM tree based on an 
XHTML text file, the browser is in control. It’s doing 
what it thinks is best to represent that XHTML - and 
sometimes, that means interpreting line endings or extra 
tabs and spaces as text nodes filled with whitespace. 

But when you’re making changes to a DOM tree,you y re 
the one in control. The browser won’t insert anything 
unless you tell it to. So when you’re working with the DOM 
nodes you inserted into the currentWord <div>, you don’t 
have to worry about extra whitespace text nodes. Instead, 
you can go right to the first child of the <div>, and know 
that it’s a <p>. 



Tesr DriVq 


Test out your new-and-improved event handler. 

See how addLetter () works now. Each time you click a tile, it should 
add another letter to the current word box. Does it work? 



There are a few things we still need to do related to clicking on tiles, 
though... can you figure out what they are? 
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Wc need to disable each tile. That means 
changing the tile’s CSS class... 


Once a player’s clicked on a tile, they can’t re-click on that tile. So we need 
to disable each tile once it’s been clicked. 



Cluikihg oh a tile should 匕 ^ 
the look o-f -that tile. 





This is presentation, so you probably already know what to do, don’t you? 

In addLetter (), we need to add another CSS class to the clicked-on tile. 
There’s a class in puzzle . css called “disabled” that’s perfect for the job. 


Add this line to the end of addLetter () : 


function addLetter() 
// existing code 

this.className += 




disabled 11 




\Afe vxttd -to add *tWis dlass -to 

classes, Y\ot 

七 W\ost dasse! 


Now, once addLetter () runs, the clicked-on tile fades, and then looks 


/Wake suire theme's a syau io 

ihc C££ Masses ^ 


like it can’t be clicked anymore. 


•••ANP turwiwg OFF the addLetterO 
event handler 

As long as there have been games, there have been gamers looking for an 
edge. With Woggle, even though we can disable the look of a tile, that 
doesn’t mean clicking on the tile doesn’t do anything. Clicking on a tile — 
even if it’s got the disabled class — will still trigger the addLetter ( ) 
event handler. That means a letter can be clicked on an infinite number of 
times... unless you put a stop to it! 

So we need to take another step at the end of addLetter ( ) . We need to 
remove the addLetter () event handler for the clicked-on tile. 

function addLetter () { 

// existing code 

this.className += " disabled"; 

this.onclick =""; 

} Set ou\\d. -to ah emp-ty s-tHhg. Tha-t 

amoves -tk addUiM cvch-t hahdlev-. 
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Tqst DriVQ 


We’ve handled tile clicks... completely! 

Have you made all the additions you need to addLetter () ? Once you 
have, fire up Woggle, and build some words. 



WtiWilk 


hfMa 








Wow Oh a ti| c adds a , ciic ^ 

to the Y/oY'd box … 


4 


* 








disables *tV^c look of *t^c *t»lc. 


… 3hd "tuv-hs 

the Ohdi 乙 k 

eveivt hdhdlevs. 


now 


sutmlt Wrwd 


SEWi ?： 0 


\v 


m 


■ 
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a request is a request 



board 


Handle tile clicks 


date score 


Submitting a word is just (another) request 


addLetter () was all about using the DOM, and submitting a word to the 
server is all about request objects. Woggle’s already got a program on their 
server that takes in a word and returns a score for that word... or a -1 if the 
word isn’t a real English word. 


JavaSdirip 七匕 ah 
sChd "the wovd "to "the 

sc\rvcir-sidc pv-og^am. 



word 


-1 or score 


The sevvev v-cs\>oy\ds y/’rth - 1 
»-(* v/ovd valid) ov* 

stove -for v/ovd 
i-P v/ovd »s valid, 

/*P "the wov-d 


Tk scvvcyr-sidc poyam a 七 

V^oaaic 代 — 

oroLr，or, 3 

•bo see -tv^c >wovd valid. 




word 


matches 


lookup-word.php 




dictionary.p 


-〜一 v u valid, the 

play^ will 3c t / poih £ ^ 

Vowcl ^ 2. poihts “ 從 h 
乙 Ohsohdht. 


丁 he di^'tiohdiry web scv-vi^c 

i-f -the submitted wo 
is valid Ehglish. 





Our JavaScript doesn't care how the server 
figures out its response to our request 

With Woggle, it really doesn’t matter that the server-side program we’re 
calling makes another request to another program. In fact, it wouldn’t matter 
even if lookup-word. php called a PHP program, then made a SOAP 
request to a Java web service, and then sent a message to a cell phone using 
an SMS gateway. All that does matter is that we send the server-side program 
the right information, and it returns to us the right response. 


Your JavaScript 
only needs to 
worry about 
sending requests 
and kanctlingf 


responses •“ not 
kow tke server gets 
tkose responses. 
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rpen your pencil 


You’ve built and sent a lot of request objects by now. Using what 
you’ve learned, can you write the submitWordO function? 


細 wers on pa^e 316. 


► 


you are here ► 
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synchrony is still useful 



board 


Handle tile clicks 


date score 


Wait a second... before you start waving around all 
your fancy asynchronous request objects again, why 
should we be making an asynchronous request here? 
Shouldn’t players have to wait for the server to 
check their word and return a score? 


Not every request should be an 
ASYNCHRONOUS request. 

In all the earlier chapters, we made asynchronous 
requests, so users weren’t stuck waiting on a 
password to get checked or a page to get loaded. 
But in Woggle, we really want users to wait on the 
server before doing anything else. So when a word 
is sent to the server for scoring, we need to use a 
synchronous request. 



There are some other advantages to using a 
synchronous request for submitting a word to 
the server in Woggle. Can you think of any? 
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O 


o 








So if were using a synchronous request, do we 
need a callback function? If the program waits 
on the server, why not just write the code 
to handle the servers response right in our 
submitWordQ function? 


Synchronous requests don’t require a 
callback function. 

When a request is asynchronous, the browser keeps 
running your code. So after it runs request. 
send (null), the browser goes to the next line of 
your sending function. That’s usually the end of the 
function because we want users to be able to keep 
working with a web page. Then, when the server 
responds, a callback gets run that can update the 
page or respond to what the server said. 

But with a synchronous request, the browser waits 
on the server. No more code is run until the 
server comes back with a response. So in that 
case, we really don’t need a callback. We can just 
continue on with the sending function, and know 
that the request object will have the server’s 
response data in it! 



rpen your pencil 




Go back to the code you wrote on page 313, and make a few 
changes. First, make sure your request is synchronous, and not 
asynchronous. Then, remove a reference to a callback; we don’t 
need one! Finally, at the end of the function, display the response 
from the server using an alert box. 
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chain statements 



board Handle tile clicks 


(^Sharpen your pencil 

Solution 



Your job was to build the submitWord() function... and to make 
sure it works synchronously. What did you come up with? 


function submitWord() { 

var request = createRequest(); 
if (request == null) { 

alert ("Unable to create request object .’，）； 
return; 



TKis is 七 hdad 

suirc you've got utils js 

ih you^ XHTML page. 


First v/c <dW> ^ 


} tuvre 灼七 >wovd … 

var currentWordDiv = document•getElementByld( n currentWord n ); ^-—3 
var userWord = currentWordDiv.firstChild.firstChild.nodeValue; 
var url = M lookup-word.php?word=" + escape(userWord) 

■^equ-est. onroadyctatechango — updatoScoro; 

request. open ( "GET" ，- url , false); 
request • send (null); ^ s ^ d |,kc always, 




alert("Your score is: 


bu*t >wc use w -faUcZ ， -this a 

^V\CMyOY\Q\AS vc^ucst 

+ request.responseText); 


\6^v-ov\ous 


WcVc a sy^hyro^ 

vcciucst, so 細 c s … ccd W 
dallbadk 七 wc. 


The Code woh't get hcv-c uh-til 
the sc\rvc\r \rcsfohds, so it s sa-fc 
"to use the \rcsp0hsc7cxt pv-opev-ty. 


thereicire no ^ 

Dumb Questions 


I got a little lost on that 
currentWordDiv.firstChild.firstChild. 
nodeValue bit. Can you explain that? 

Sure. You can break that statement 
down into parts. So first, there's 
currentWordDiv.firstChild. 
That’s the first child of the <div>, which is 
a <p>. Then, we get the firstChild 
of that, which is a text node. And finally, we 
get the nodeValue of that, which is the 
text in the node—the word the user entered. 


Wow, that’s confusing. Do I have to 
write my code that way? 

You don’t have to, but it's actually a 
bit faster than breaking things into lots of 
individual lines. Since this entire statement 
is parsed at one time, and there’s only one 
variable created, JavaScript will execute this 
line a bit faster than if you’d broken it into 
several pieces. 

Didn’t you forget to check the 
readyState and status codes of the 
request object? 


When you're making a synchronous 
request, there’s no need to check the 
readyState of the request object. The 
browser won’t start running your code again 
until the server’s finished with its response, 
so the readyState would always be 4 
by the time your code could check it. 

You could check the status to make sure 
your request got handled without an error. 

But since you'll be able to tell that from the 
actual response, it's often easier to just go 
right to the responseText. Remember, 
we’re not making an asynchronous request. 
With a synchronous request, there's no need 
to check readyState and status in 
your callback. 
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Usability check: WHEN caw 
submitWordO get called? 

Did you try and test out your new submitWord () function? If you did, you 
probably realized that the function isn’t connected to anything. Right now, 
the “Submit Word” button doesn’t do anything. In fact, “Submit Word’’ is an 
<a> element, and not a button at all! 

<div id= n submit"Xa href= n # n >Submit Word</aX/div> 


This <div> and <a> are then styled to look like a button on the page. We 
had a similar situation with the tiles, though, so this shouldn’t be a problem. 
We can assign an event handler to the onclick event of the <a> representing 


the “Submit Word” button: 


var submitDiv = document•getElementByld( n submit") 
var a = submitDiv.firstChild; 


the v-ight <div>. 

r 

cM\\d oi <dW>. 


while (a.nodeName 




a 


.onclick = submitWord; 




^ss'i^ *tV^c cvcy\*t V^awdlcv-. 


Sihdc the b\rowsc\r treated this 
pa\rt o-f the VOMi wc should r^ake 
suve wc doh t Kavc S v/hi-tespade 
text hode. 


You can't submit a word if there's wo word to submit 

So where do you think this code goes? In ini tPage () ? But that doesn’t 
make sense... in in it Page (), there aren’t any letters in the current word 
box, so players shouldn’t be able to submit anything. 


j\\\ o-f *bW»s 


V\CV/ 


dodc- 


9°« here. 


The first time there’s a word to submit is the first time there’s a letter in the 
current word box. That’s also the first time that a tile is clicked, which turns 
out to be the first time addLetter () is called for a new word. 



Fortunately, we’ve already got a special case: the first time addLetter () is 
called for a new word, we’re creating the <p> and text node underneath the 
currentWord <div>. So we just need to add the code above to that part of 
the addLetter () event handler: 

if (currentWordDiv.childNodes.length == 0) { 

// existing code to add a new <p> and text node 
// existing code to add in first letter of new word 

// code to enable Submit Word button 


} else { // ... etc ... 
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test drive 



TesT DriVq 



board 


Handle tile clicks 


date score 


Get your word score. Go on，get it! 

Have you made all the additions you need to addLetter () ? Once you 
have, fire up Woggle, and build some words. 



I 


Ei 


m 


1 


f\loYJ you Wild 
y/ovds 




WebviNe Pyzzl^-s 


Thm pigiu iftE hLfp ； y/wvww.hi! ： u.dfirsfEiib^^om 
Your score is 10 


ndder 


Scwe: 0 


Cli^kihA 
"Submit 
Word 1 

you<r s^ov-c. 


Even though clicking “Submit Word” doesn’t call 
submitWord() until at least one letter’s entered, “Submit Word” 
still looks like a button. Can you write code to let users know 
what they should do if they click “Submit Word” too early? 
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Well, *tKis 
•isy>’ 七 d 

VOM 

method) 
bu 七 you 
y>cvcv- ky>oy/ 
V/Kcir> you II 
r\ttA i*t- 




娜 


Match the DOM properties and methods on the left to the tasks you’d 
use those properties and methods to accomplish on the right. 


nodeValue 

You want the table cell just to the left of 
the table cell you’re in. 

pcirseint 

You want all the <p>’s within a 
particular <div>. 

remoVeCKild 

You want to get rid of all the <br> 
elements on a page. 

preVIousSlbllng 

You want to exchange an <img> 
element with some descriptive text. 

c}i!lc[]s[ocles 

You want to print out a name, which 
is in the <div> with an id of “name.” 

replace]s[oc[e 

You need to add the numeric 

values of two form fields. 


you are here ► 


319 







go right brain! 




* 






Match the DOM properties and methods on the left to the tasks you’d 
use those properties and methods to accomplish on the right. 



You want the table cell just to the left of 

the table cell you’re in. dhil 氣 d C s gives ou 

You want all the <p>’s within a N 

particular <div>. 


hode. 


You want to get rid of all the <br> 
elements on a page. 


You want to exchange an <img> 
element with some descriptive text. 


You want to print out a name, which 
is in the <div> with an id of “name. 


勺， 

70 UVC 

ov\c ^odc 

， 


You need to add the numeric 


vc^U^KodcO. 


values of two form fields. 


ih a hodc is 


W 2.r ， m*bo i\\t Zl- 



^p^rcsch-tcd by 
the hodcl/aluc 

propeirty 0h a 
"tex-fc hode. 


320 


Chapter 7 










manipulating the dom 


ton% ExefictSe 

唐 -■ It’s time to put everything you've learned so far to use: DOM manipulation, creating DOM 

隱 nodes, JavaScript string functions, handling the request from a server... this exercise has it all. 

Follow the directions below, and tick off the boxes as you complete each step. 


If the server rejects the submitted word, let the player know with a message 
that reads, “You have entered an invalid word. Try again!" 


If the server accepts the submitted word, add the accepted word to the box 
of accepted words just below the “Submit Word” button. 

Get the current score, and add the score that the server returns for the just- 
accepted word. Using this new score, update the “Score: 0” text on the screen. 


Whether the server accepts or rejects the word, remove the current word from 
the current word box. 


Enable all the tiles on the playing board, and reset the “Submit Word” 
button to its original state. 

Below is the DOM tree for the sections of the page you’re working with, as the 
browser initially creates the tree. Draw what the DOM tree will look like after 
your code has run for two accepted words (the specific two words don’t matter, 
as long as the server accepted both of them). 
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long exercise solution 



board Handle tile clicks 



fLont ExeficlSe 
SotyilOH 



Submit word Update score 


Below is the completed version of submitWord(). Now it not only submits a word, but 
updates the score on the page. How close if your solution to ours? 


function submitWord() { 

var request = createRequest(); 
if (request == null) { 

alert ("Unable to create request object .，'）； 
return; 

} 

var currentWordDiv = document•getElementByld( n currentWord n ); 
var userWord = currentWordDiv.firstChild.firstChild.nodeValue; 


var url = "lookup-word.php?word= M + escape(userWord); 
request.open("GET ", url, false); 
request.send(null); 


Tlic SCVVCV" V"C*buV"\r\S —I i-f 

suWitbed wovd »s mvalid- 

if (request.responseText 


If the server rejects the submitted word, let the player know. 


-i) 


alert ( "You have entered an inva 1 
else { 


var wordListDiv = document • getElementByld ( n wordList，') 
var p = document.createElement( M p"); 
var newWord = document.createTextNode(userWord); 
p.appendChild(newWord); 
wordListDiv.appendChild(p); 


^ Add the accepted word to the box 
of accepted words. 


This trtaits a <f>> a •七 r>odc 

wrth user’s v/ovd, ⑶ adds bo*th *to 

v/ov*dLis*t <div>. 


var scoreDiv = document • getElementByld (’'score ，，）； 
var scoreNode = scoreDiv.firstChild; 

var scoreText = scoreNode.nodeValue; Vou 63^ W Sdov-C 
var pieces = scoreText. split ( M ▼▼) ; 


t 口 ㈣ :严 



Update the “Score: 0, 
text on the screen. 


var currentScore = parselnt(pieces[1]); 


Wt 


wah-t -the 冰 


currentScore += parselnt(request•responseText); 
scoreNode.nodeValue = "Score : " + currentScore 


it as 

j\dd scrMtrs v-cspoy\sc, ar\d 

-bKch u\>date i\\t ⑽ dc. 
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var currentWordP = currentWordDiv.firstChild 
currentWordDiv.removeChild(currentWordP); 
enableAHTiles (); 

var submitDiv = document•getElementByld( n submit n ); 
var a = submitDiv.firstChild; 

while (a.nodeName == "#text") t , 〜 

a = a.nextSibling; to reset 

Wovd butto^to 釙 alertU 

} cvcir\*t i^a^dlcv-. 

a.onclick = function () { 

alert ("Please click tiles to add letters and create a word .，'）； 




function enableAHTiles () { 



tiles = document•getElementByld("letterbox” ） .getElementsByTagName("a"); 
for (i=0; i<tiles.length; i++) { 

var tileClasses = tiles [i] . className . split (" ") ; A "tile "that has \ classes has 


if (tileClasses.length 
var newClass = 


4 ) 



■the disabled'' class ai -the C hd. 


tileClasses[0] + ' 
tiles[i].className : 
tiles[i].onclick = addLetter; 


n n 


tileClasses[1] + 
newClass; ^ __ 


+ tileClasses [2] 





lA/c use 

Masses, bu*t dvof -bV^c Wvth. 


► Solution continues on the next pa^e. 
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we told you, it’s long 



board Handle tile clicks 



E^eficiSe - 

SotptioH (cpHiiHvep) 



Submit word Update score 


Below is the DOM tree for the sections of the page you’re working with, as the 
browser initially creates the tree. Draw what the DOM tree will look like after 
your code has run for two accepted words (the specific two words don’t matter, 
as long as the server accepted both of them). 



TWis \>avt tvcc 切 
i\\t sa^c. 




The sdovc 七 wt Y\odt v/ill Kavc air> 
updated r^urwbev as r^odcUaluc- 
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manipulating the dom 



TesT DriVq 


Anyone for Woggle? 

Do you have everything working? Try out Woggle... it’s all working just 
the way we imagined way back on page 286 . 



%\ S T 

■laBHaHMiHaiiU 




a SCoY' 


you\r y/ov-d 


AT ，。 






**>« 




^ ^ 一 s … 


Siibmlt Wnrri 


! I ” I 1 卜 






^Mbul t W nrd 


■ ^pTA 






scerK 10 




rim 


Bath y/ov-d adds -to i\\t >wov-d 
|is*t, ar>d *to *tKc store- 


f 


■kwe: 0 


Tiles a\re \rcsct ea£h time 

C3iv\ be reused- 


S£0^- 10 




pura J-ftnfer 


- 


_ l^p - m Jmrnm twms 




luonlt WtmtI 






化 hd 


1 V ! 


Swe: J 
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challenge yourself 


But there's Still more to do! 



What if there was a timer that gave you 60 seconds to enter as 
many words as you could think of? 



What if you could choose a lettered tile, and then only choose 
tiles next to the last selected tile? 



What if once you used letters to make a valid word, those tiles 
were replaced by new random tiles? 



And besides all that, how do YOU think Woggle could be improved? 


We want to see you put your DOM, JavaScript, and iljax stills to 
wort. Build your BEST version of Woggle, and submit your URL 
in the Head First Labs “Head First formn. We’ll he giving 
away cool prizes for the best entries in the coming mondiS. 




n n n 


Head First From O'Reyly Media, Inc 




个 * ㉝ http : fi hcadflrsUa bs.com/ 



Friendly Guides 



Head FiFst Labs 





Head First Ajax Sneak Pn 


Gtc Ar\ irviroduai&n to widh in exce 
whirh yni/U finrt rwi fhis piige. 


June Newsielter 

Wc sc Fit out our June Newsletter rcccn 
tiewsleciers via 


finill, 




























manipulating the dom 



DOMAcrostic 

Take some time to sit back and give your right brain something to do. Answer 
the questions in the top, then use the letters to fill in the secret message. 


This method creates an element of the specified type: 


1 2 3 4 5 6 7 8 9 10 12 13 14 

This is the name of the game we built in this chapter: 


15 16 17 18 19 20 

This method adds an element to the DOM tree: 


21 22 23 24 25 26 27 28 29 30 31 

A DOM tree is a just collection of these: 


32 33 34 35 36 37 38 

This method substitutes one node for another: 


39 40 41 42 43 44 45 46 47 48 49 50 

This method removes a node from the DOM tree: 


51 52 53 

54 

55 

56 

57 58 

59 

60 

61 
















37 

58 

3 

33 

39 

16 

15 

38 

45 51 


5 

2 

21 

25 38 

8 

43 

14 

45 

38 

26 32 

10 

13 16 50 

52 

38 

59 

13 

37 

16 

54 

33 

34 9 

57 5 38 
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exercise solution 



DOMAcrostic 

Take some time to sit back and give your right brain something to do. Answer 
the questions in the top, then use the letters to fill in the secret message. 


This method creates an element of the specified type: 

CREATEELE/1^ ENT 

1 ~2 3 4 5 6 7 8 9 10 12 13 14 

This is the name of the game we built in this chapter: 

W 0 6\ 6( L E 

"^5 16 17 18 19 - 20 

This method adds an element to the DOM tree: 

APPENDCtt I L V 

21 22 23 24 25 26 ~27 28 29 30 31~ 

A DOM tree is a just collection of these: 

OBJECTS 

32 33 34 35 36 37 38 

This method substitutes one node for another: 

REPLACECtt I L V 

~39 40 41 42 43 44 45 46 47""48 49 50~ 

This method removes a node from the DOM tree: 


R 



0 

V 


c 

tt 1 L 

V 

51 

52 

53 

54 

55 

56 

57 

58 59 60 

61 
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37 

58 
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33 

39 

16 

15 

38 

45 

51 
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21 

25 

38 
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43 

14 

45 

38 

26 

32 

10 
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8 frameworks and toolkits 






Trust No One 





So what’s the real story behind all those Ajax frameworks? 

If you’ve been in Webville awhile, you’ve probably run across at least one JavaScript or 
Ajax framework. Some frameworks give you convenience methods for working with 
the DOM. Others make validation and sending requests simple. Still others come with 
libraries of pre-packaged JavaScript screen effects. But which one should you use? And 
how do you know what’s really going on inside that framework? It’s time to do more than 
use other people’s code … it’s time to take control of your applications. 


this is a new chapter 
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to framework or not to framework? 


o 



Finally! This is where you show me jQuery and 
mooTools and Prototype, and all those other cool 
Ajax frameworks, right? And I can quit writing 
all these stupid request.send() and request, 
onreadystatechange calls? 


There are a LOT of options for 
frameworks that let you work with Ajax 
in different (and sometimes easier) ways. 

If you Google the Internet for “JavaScript framework” 
or “Ajax library,” you’ll get a whole slew of links to 
different toolkits. And each framework’s a bit different. 
Some are great for providing slick screen effects, like 
drag-and-drop, fades, and transitions. Others are good 
at sending and receiving Ajax requests in just a line or 
two of code. 

In fact, you’ve been using a framework of sorts every 
time you reference a function from utils . j s. All 
that script does is provide common functionality in a 
reusable package. Of course, most frameworks have a 
lot more functionality, but the principle is still the same. 

So which framework should you use? Even more 
importantly ... should you use one at all? 
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frameworks and toolkits 


— your pencil 


Re3sov\s io use 3 ^*\r«lmCv/o\rk 


Deciding to use a JavaScript framework for writing your code is a 
big deal. Below, write down three reasons that you think it would 
be a good idea to use a framework... and three reasons you think 
it might not be a good idea. 

Reasons NOT -bo use 3 -f\ramcy/o\rk 


2 . 


2 . 


3 . 


3 . 


tWei^re no o 

Dumb Questions 


I don’t even know what a framework 
is. How am I supposed to answer these 
questions? 

A framework is just a JavaScript 
file—or set of files—that has functions, 
objects, and methods that you can use in 
your code. Think of a framework like a bigger, 
more complete version of the utils . j s 
file we've been using. 


But I’ve never used one before! 

That’s okay. Just think about reasons 
you might like to try out a framework, and 
what advantages that framework might have 
over doing things the way you've been doing 
them so far. Then, think about what you 
like about how you’ve been writing code so 
far... those are reasons you might not use a 
framework. 


Is there a difference between a 
framework and a toolkit? 

Not really. Framework and toolkit 
are used pretty interchangeably in the 
JavaScript world. Some people will tell you 
a framework is a structure for how you write 
all your code, while a toolkit is a collection of 
utility functions. But that’s a distinction that 
not every framework or toolkit makes, so it's 
not worth getting hung up on. 
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fireside chat 


Fireside Chats 



Tonight’s talk ： Ajax Framework and Do-It-Myself JavaScript 
go head-to-head on utility functions, toolkits, and the pros 
and cons of do-it-yourself thinking. 


Ajax Framework: Do-It-Myself JavaScript: 

Wow, I thought you guys were never going to have 
me on. What is this, like page 332 or something, 
and I’m just now making an appearance? 

Hey, we figured you’d show up when you were 
needed. And lookie here, seven chapters down, and 
you’re just now getting involved. 

Oh boy. Here we go... you’re one of these JavaScript 
purists, aren’t you? No frameworks, no utility 
functions, just hard work and thousands of lines of 
code in a single . j s file, am I right? 

Not at all. In fact, I’m a big fan of abstracting 
common code into utility methods, not writing 
duplicate code, and even having different . j s files 
for different sets of functionality. 

So what’s your problem with me? I’d think a guy 
like you would love me. I take all those routine, 
boring, annoying tasks and wrap them up into user- 
friendly function and method calls. 

Well, that’s just it. You wrap them up... you don’t 
abstract them into a different file. You actually hide 
those details away. 

And? What’s the problem with that? I don’t even see 
the difference... wrapping? abstracting? 

Hey, you can always look at my code. Just open 
another script, and you know exactly what’s going 
on. No mystery, no “magic function.” That’s me, 
alright. 

You’re kidding, right? I’m just JavaScript, too. You 
can open me up anytime you want. So how is my 
JavaScript . j s file any different than yours? 


332 Chapter 8 


frameworks and toolkits 


Ajax Framework: Do-It-Myself JavaScript: 

Have you ever looked at yourself? Maybe in a 
mirror, or in the reflection from one of those bright 
shiny widgets you’re so proud of? 

Oh, all the time. What’s your point, Mr. Heavy- 
Handed? 

You’re impossible to figure out! There’s like a 
thousand lines of code to wade through. What if I 
want to do something just a bit differently than you’re 
set up for? What then? 

I’ve got options, man. Tons of options. Sometimes 
almost a hundred for certain methods. Beat that! 

Why in the world would I want to? Who wants to 
figure out what the eighth parameter to a method 
is? Since when is that helpful? 

Uhhh... gee, lemme think... well, how about when 
you don’t know how to do what you need to do 
yourself? Ever tried to code drag-and-drop? Or 
move around within an image, zooming in and 
zooming out? You want to build all that yourself? 

If that’s what it takes to actually understand what’s 
going on, you bet I do! 

Hey, we’re not talking about atomic fusion here. 

Sometimes you just need to get some little visual 
effect done... or an Ajax request sent. That’s no 
time to be digging around on the Internet for some 
code a junior high dropout posted to his blog three 
years ago. 

I’ll bet that kid knows what he’s doing, though! 

Yeah, and he’s also driving a ‘76 Pinto 'cause no one 
will hire him. Because he’s so slow at writing basic 
code! 


Whatever. 
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why use a framework? 



Your job was to think of some good reasons to use a framework, 
and some not-so-good reasons that come with using a 
framework. What did you write down? 


RcolsohS *bo use a ^*\rclmcv/o\rk 

1. dpnt. Kavc. .-to. wriie. Cp.de. .-fpv：. ^Aiip^s. £bai.. 

someone else has alv-cady -fi3.uv：cd out. V^ou 
... : the • c.wii^.3. ^va^ey/PJrb ： . 

wb have -fu^*tioir)S you y\o{, have time 
■jto y/\ri*tc youy-scl-f bu*t v/ould use i-f *t)^osc -fu^d*tioir\s 
y/cy-c available. So you jc-t mo\rc 

3 . The toAt \y\ -fvamevyorks is ics*tcdl mpyc because 
mo\rc people 3 \rc usrng -f\ramcv/o\rk. So *the\re’s less 

bujs, ay\d less >)ccd (oy testm 

4 . Fv ： amcy/o\rks usually take tart ^\ross-bvpv/sc\r 

issues -fo\r you, so you b> wo\r\ry abou*t IE, 

o\r Fiy-c-fo^； o\r Opevra-. 


Reasons MOT bo use a -f\ramcy/o\rk 

-- 

1. }{m. dp.n^.i. r.ca)!y. k ⑽从 wbat. ibc. .-fr.arwcwQy-k/s. 

domj. |*t mijh't be doing -thmgs y/cll v; o\r it mijht 

.... be. dpii^g .them mpyc .th 扣 yp^. 

2. The -fyamcy/oyk rni^h-jt ,ho*t. have all /the pp-tio^s 
you y/ol^-t oy ； ^ced- So you .^.4.u.P.4.h^5!^5 

....you\r dorf.c.io,ad4pmmo(Ja^ ； e.ib.c.*fy ： 彡 ! . 

3.. Spmc.iiir»>cs .a. fvra^.cwpr.k. hides .i.^.p9r.iar>i .Cp»^.cpts 

七 1 )濞七 would be hclp-ful *t° k^py/. So you 叫七 

.... learn .as mMCh .^r.aw>c.y/Qv ： k-. 


lA/c ov>W asked ^ov 七 Wee, W 七巧 
touiaA^aadma^so^ Its 

BA yrcaso^ U usm^ ^vamC^ks. 






Are there certain categories of functionality that you 
think would be better suited for a framework? What 
about things you don J t want a framework doing for you? 
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So what frameworks ARE there? 


There are several popular frameworks out there... and most of them do a 
few different things. Here’s the ones that most people are buzzing about: 


d 七 he 


Pro*to 七 





jQuery 


w os*t pofulav- -toolkits +OV 
JavaS 伙 

Aja* v-c<\ucsts. 


P^ro-toiypc is a wo^rkhoirsc lib^v-y. H JV 

St :: 心 






stv-'iV>*t atulo.us »s ay\ add - cm *to 

P^oUv?c, and -.s a •• 州 cd a 七 

%Octtr\ m JavaS6v-»\>t 



^noolools is 


y>CY/e\Tj but vcv-y 

-Pull—Pcatuv-cd. 

V<>U get SdlrCCh 
c-Pfcd-b ahd Ajax 
v*c^ucs-t utilrtics. 


How often do these things change? Are 
frameworks releasing new versions very often? Is 
that something we should be worried about? 


O 


Frameworks usually change FASTER than 
the underlying JavaScript syntax does. 

Frameworks are controlled by the people who write them, 
and so a framework might release a new version every 
few months... or in early stages, every few weeks! In fact, 
a framework might lose popularity and totally disappear 
over the course of six or seven months. 

But the core JavaScript syntax and objects, like 
XMLHttpRequest and the DOM, are controlled by big, 
slow-moving standards groups. So that sort of syntax 
won’t change very often. At the most, you’ll see something 
change every few years. 
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different syntax, same functionality 


Every framework uses a different 
syntax to do things 

Each framework uses a different syntax to get things done. For example, 
here’s how you’d make a request and specify what to do with the server’s 
response in Prototype: 


The (\\rsi pa\rt o( both bits o( 

乙 ode jets a value -fvorw the pay. 


This Jets -the 
clcmcht y/’rth dh 
id o*p 'Wlrhamc. 


T\\\s is 

okjct*t -fov- 
mdk'rn^ v-c<\ucs*b 

•m Pro*to-ty\>c- 


function checkUsername() { 

var usernameObj = $("username"); 


〆- ^ 

usernameObj.className 


thinking"; 


var username = 

=escape(usernameObj 

.value); 

new Ajax.Request("checkName.php ", 

{ 

method : 〃 get r 

1 

r 


parameters : 

"username=" + username. 


7~V)C^ 3 is w'Sdc- Tl^is is 3 

lot 
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The syntax may change... but the 
JavaScript is still the same 


At a glance, that Prototype code looks pretty different from anything 
you’ve written before. But take a look at the equivalent JavaScript from 
an early version of Mike’s Movies registration page: 

function checkUsername() { 

’ 一 document•getElementByld( n username'，）•className = "thinking"; 
request = createRequest(); 
if (request == null) 

alert ( "Unable to create request"); 
else { 

■— — var theName = document • getElementByld ( ， ’ username" )• value; 
var username = escape(theName); 
var url= "checkName.php?username=" + username; 
request.onreadystatechange = showUsernameStatus; 
request.open("GET ", url, true); 
request.send(null); 





function showUsernameStatus() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

if (request.responseText == "okay") { 

document•getElementByld( ，， username n ) .className = "approved"; 
document•getElementByld("register n )•disabled = false; 

} else { 

document • getElementByld ('’username，'）• className = "denied"; 
document.getElementByld("username") .focus (); 
document•getElementByld( n username n ) .select (); 
document•getElementByld("register n )•disabled = true; 
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frameworks supply “free” features 



But thafs just the same code weve been 
writing... it looks a little different, but 
ifs the same stuff! I don’t want to learn 
another new set of syntax. 


JavaScript and Ajax frameworks are 
just new and different ways to do what 
you’ve already been doing. 

When you boil it all down to code, an asynchronous 
request is an asynchronous request is an asynchronous 
request. In other words, under the hood, your 
JavaScript code still has to create a request object, set 
up code to run based on what the server returns, and 
then send that request. No matter how the syntax 
changes, the basic process stays the same. 

Using a framework might make parts of setting up 
and sending that request easier, but a framework won’t 
fundamentally change what you’ve been doing. And 
yes, you’ll definitely need to learn some new syntax to 
use any framework effectively. 


But ril bet there are some pretty 
big advantages, too, right? Like cool 
visual effects, and maybe some more 
robust error handling? 


Frameworks offer a lot of nice 
features “for free.” 

Most frameworks come with a lot of 
convenience methods and cool visual effects. 
And the syntax isn’t really that hard to pick 
up if you’re already familiar with basic 
JavaScript and Ajax concepts and principles. 

And one of the best features of frameworks 
is that a lot of them handle situations where 
users don’t have JavaScript enabled in their 
browsers. 


O 


Q 
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You didn’t mention my favorite 
framework, [insert your framework name 
here]. What’s up with that? 

Well, there are a lot of frameworks 
out there, and more are showing up every 
day. The frameworks on page 335 are 
some of the most popular right now, but your 
framework might show up on that list in a 
few months. 

In any case, the main thing is that a 
framework doesn’t provide fundamentally 
different functionality than the code you've 
been writing. It just makes that functionality 
more convenient, or it takes less time to 
write, or it adds visuals... you get the idea. 

Do all frameworks make working 
with elements on a page so easy? 

If you use a framework, you probably 
won’t be writing a lot of DOM methods, 
like getElementByld () or 
getElementsByTagName(). 

Since those are such common operations, 
most frameworks provide syntax to make 
that easier, like $ ( "username" ) to get 
an element with an id of “username.” 

So what’s the framework using to 
get the element, then? 

The same DOM methods 
you’d use without the framework. 

$ ("username" ) just gets 
turned into a call to document. 
getElementByld 
("username" ). Additionally, the 
returned object has its normal DOM methods 
available, as well as additional methods the 
framework might provide. 



Dumb Questi9ns 

So frameworks are a good thing, 

right? 

Well, some people use frameworks 
because they don’t want to take the time to 
learn the underlying concepts. That’s not a 
good thing because those folks don’t really 
know what’s going on in their code. 

If you use a framework, though, you do 
know the concepts and code underneath. 
That means you'll probably be more effective 
as a programmer, and be able to hunt down 
problems a little more effectively, too. 

So a framework just does what 
we’ve already been doing ourselves? 

Well, frameworks often do a little 
more than we’ve been doing. They typically 
provide more options, and they also tend 
to have a more robust error handling setup 
than just showing an alert () box. But 
they're still making requests and handling 
responses and grabbing elements on a page 
using the DOM, just like the code you've 
been writing. 

So we shouldn’t use frameworks 
since we already know how to write all 
that request and response and DOM code, 
right? 

Well, frameworks do offer a lot of 
convenience functions, and those screen 
effects are pretty cool... 


So then we should use 
frameworks? 

We didn’t say that either. There’s a 
certain amount of control you lose with a 
framework because it might not do just 
what you want it to in a certain situation. 
Sometimes it's best to take complete control, 
and just write the code you need without 
putting a framework in the mix. 

So which is it? Use a framework, or 
don’t use one? 

That’s the question, isn’t it? Turn the 
page, and let's try and figure that out. 


Frameworks 
can’t solve your 
programming 
protlems lor you. 


It’s up to YOU to 
UMDERS1MD your 

code, wketker or not 
you use a framework 
to make tkat code 
easier to write. 
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what should i do? 


To framework or wot to framework? 

There are a lot of good reasons to use a framework... and plenty of 
reasons to not use one. Some people go back and forth between projects 
where they use a framework and projects where they don’t. It really 
depends on the situation and your personal preferences. 


My users want high-end 
visuals, and script.aculo. 
us gives me that. I can do 
tons of cool screen effects 
with that toolkit. 



0 


O 


I spend all my time 
dealing with accessibility... I 
use a framework because ifs 
more convenient, and it saves 
me time to focus on how my site 
works for the disabled. 


A 伽 sibili 切 - 士 ded 从 1> de〒v 



Hobbyist ⑺今 

〜 hhih^ a Popular O 


〜 hh_h3 a popular 
web si-tc 



JavaSoft 
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I use a toolkit to handle 
errors, deal with weird 
mobile browsers, and let my 
team focus on functionality, not 
the browser wars. 



ftusmcss 

lor mobile dcv\6cs 


We have lots of weird requests 
that interact with our server 
programs and the data... I avoid 
toolkits because I want complete 
control of how my requests are 
configured and sent. 


O 


0 


I think mooTools looks pretty 
cool, but I want to get a better 
handle on requests and callbacks, 
ril probably use a toolkit at some 
point, but just not yet. 



Chgihccv- a-t s 


dcvclopcv- 
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choose wisely 


The choice is up to you... 


Is it important for you to really control every aspect of your code? Do 




you go crazy wondering how efficient every function you use in your 
JavaScript really is? Can you not stand the thought of missing out on 
learning some new tool, trick, or technique? If this is you, you may 
just end up frustrated and annoyed by frameworks. Stick with 

writing your own requests, callbacks, and utility functions, 
building an ever-growing library of code in utils . 
j s, and not having to update to a new version of a 
framework every few months. 


Don’t care so much about every internal line of code? 

If you’re a productivity nut, and want great apps with a 
minimal amount of time spent dealing with errors, weird browser 
inconsistencies, and oddities of the DOM, frameworks might be 
just for you. Say goodbye to request. send (null) forever, 
and pick a framework to learn. It shouldn’t take you long... you 
already know what’s really going on with asynchronous requests. 



Either way, the choice is yours. We think it’s pretty important 
to know what’s going on under the hood, whether you use a 
framework or not, so the rest of this book will stick with plain 
old JavaScript instead of going with any particular framework. 
But everything you’ll learn still is useful, even if you later use a 
framework to hide away the details of what’s going on. 
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9 xnil requests cind responses 

參 


More Than Wordstan Say 


w 



Oh, Bob... I love it when you describe 
yourself with angle brackets, and tell 
me all about your attributes. Youre 
just so darn... extensible! 


How will you describe yourself in 10 years? How about 20? 


Sometimes you need data that can change with your needs... or the needs of your 
customers. Data you’re using now might need to change in a few hours, or a few days, 
or a few months. With XML, the extensible markup language, your data can describe 
itself. That means your scripts won’t be filled with ifs, elses, and switches. Instead, 
you can use the descriptions that XML provides about itself to figure out how to use 
the data the XML contains. The result: more flexibility and easier data handling. 


As a sPc£>idl koy\us, vc 

POM ^ 

Aa? 七伙 … keep ^ eye out. 


this is a new chapter 






rock-n-roll forever 


Classic rock gets a 21st century makeover 

Rob’s Rock and Roll Memorabilia has hit the big time. Since going online 
with the site you built for Rob, he’s selling collectible gear to rich customers 
around the world. 

In fact, Rob’s gotten lots of good feedback on the site, and he’s making some 
improvements. He wants to include a price for each item, in addition to the 
description, and he also wants to be able to include a list of related URLs so 
customers can find out more about each item. 



Rob waivts 
■fco add ai 
pv-i^c -Po\r 
itcrw. 


\itrr y/'ill Kavc o^c ov 
move URLs *bo -f 'md out 
move akou-t 七 he rtc 眯 . 
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Server Response Magnets 

Below are diagrams of the interactions between several of the apps 
you’ve built and programs on the server that those apps use. Can 
you place the right server response magnets on each diagram? 



Yoga for Programmers 



Tke Fifteen Puzzle 



server 

eraction 


Use tV^csc -tV^c 

SCV'/CVS VCS^OV\SCS. 



Web server 



{f y^ u 4 饮 

% io 

or ^C6k youv 


oy/h 





s 

Web server 


MiWs Movies 


Web server 







Web server 


Cliapte^^^/oggle 


fi^terpen your pencil 


How are the server responses from the apps you’ve built so far 
different from what Mike wants his server to respond with in the 
new version of his rock and roll site? 
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Server Response Magnet Solutions 

Below are diagrams of the interactions between several of the apps 
you’ve built and programs on the server that those apps use. Can 
you place the right server response magnets on each diagram? 




Web server 


Yoga for Programmers 




M»kcs scvvcv-sidc 

vetuvhs w okay ov* 

w dcmcd w ^ a us^^amc 

dr\d \>assy/ov-d- 



Tke Fifteen Puzzle 


Web server 






server 


interaction 


Us^ tV>e POM “ 


t 


铷 c Puzzl< 


MiWs Movies 


Thc sclr ， 
a store 4 ^ 

is invalid. 
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xml requests and responses 

^Jharpen your pencil_ 

Solution 

How are the server responses from the apps you’ve built so far 
different from what Mike wants his server to respond with in the 
new version of his rock and roll site? 

All the. servers.so far.scwt out.a ^inglerespome... Mike's.server 
is going to.sewd baok more.tbaw owe piece, of.date,. 


How should a server send a 
MDITI - valued response? 

So far, all the server-side programs we’ve worked with have sent back 
a single piece of data, like -1 or “okay.” But now Mike wants to send 
back several pieces of data at one time: 



string description 


of the selected item. 


❺ 

❺ 


A numeric price for the item, like 299.95. 


A list of URLs with related information about the item. 


I tell you what... this is pretty big 
business these days. If you can figure out 
how to help me, ril give you an all-original '59 
Les Paul electric guitar, okay? 


What would you do? 

There are lots of ways to handle 
getting more than one value back from 
the server, and this time, the choice is 
up to you. What do you think? 
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which format? 



Tm going with 
XML Ifs flexible, \fs 
industry standard, and I even 
think theres a responseXML 
property on the request object 
we've been using. 


CSV, baby... comma-separated 
values. They're easy, pure text, 
and a piece of cake to produce. 
Hello, Les Paul. 


You guys are making this 
way too hard. The server can 
format its response as XHTML 
and we can stick with the 
innerHTML property. 




Time to place your bets. We’re going to follow Frank, Jim, and Joe 
and see which one comes up with the best solution. Who do you 
think will solve Rob’s site problems and win the Les Paul? 


□ 

□ 

□ 


XML is the best choice. Frank’s gonna win. 

CSV is simple and functional. Go, Jim! 
innerHTML: it ain’t broke. Joe’s got it in the bag. 


348 Chapter 9 









xml requests and responses 



harpen your pencil 


en 


You’re not done sharpening that pencil just yet. Suppose you had the 
following information for an item: 

Item ID: itemCowbell 

Description: Remember the famous "more cowbell” skit from Saturday Night 
Live? Well this is the actual cowbell. 

Price: 299.99 

URLs: http://www.nbc.com/Saturday_Night_Live/ 


③ 



http://en.wikipedia.org/wiki/More_cowbell 
How would a server represent this information... 



would look like. 



@ 


...as 


CSV (comma - separated values)? 


Wa 七 >would -tV^c CSV look 


|\lcc ^vom 



I) 


...as 


an XHTML fragment? 


abou-t XttT/WU 
suable -Pov- ihhcvH'TML? 
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dueling data formats 



You’re not done sharpening that pencil just yet. Suppose you had the 
following information for an item: 

Item ID: itemCowbell 

Description: Remember the famous "more cowbell” skit from Saturday 
Night Live? Well this is the actual cowbell. 

Price: 299.99 

URLs: http://www.nbc.com/Saturday_Night_Live/ 
http://en.wikipedia.org/wiki/More_cowbell 


How would a server represent this information... 



...as XML? 

<?xml version="1.0 M ?> 
<item id="itemCowbell M > 


AH dofi.umc^'ts like "this. 


^r 


VVe used a*t*tv-'»bu*tc -fov- itcw' IP- 


<description>Remember the famous "more cowbell" skit from 


Saturday Night Live? Well this is the actual cowbell• 〈 /description 〉 

<price>299.99</price> 丁 l j > . 丄 . _ 」 、 y 

^ ^ ^ I nc desdmpticm a 灼 d pv-idc av-c —/ 

〈 resources 〉 m )</^L demits. 

<url>http :// www.nbc.com/Saturday_Night_Live/</url> 


<url>http : //en.wikipedia.org/wiki/More_cowbell</url> 


</resources> 
</item> 



youfed URLs a 

v-csouv-C.cs clewe 此 七 

tacM URL m a u^rl cUc” 七 . 


* Thcsc s olutiohs avc just OHB way io vcprcscht the \i^ 
d 也办 XMU CW)d XHTML, /ou 叫 
With son，cthihg a little di^Wht As lo^g as you go*t 
vigh 七 values ih the right youVc a!! set 
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@ ••• as CSV (comma - separated values)? 

itemCowbell,Remember the famous 1 more cowbell ' skit from 

Saturday Night Live? Well this is the actual cowbell2 99.9^7 j^ 
http : / / www. nbc . com/Saturday—Night_Live^^ 


http : //en.wikipedia.org/wiki/More cowbell 


item ih a CSl/ sVmg is 
separated by a 


❹… as an XHTML fragment? 

<p>Description : Remember the famous 1 more cowbell" skit from 
Saturday Night Live? Well this is the actual cowbell.</p> 
<p>Price : $299.99</p> 

<ul> 

<li><a href= M http :// www.nbc.com/Saturday_Night_Live/ M > 

http :// www.nbc.com/Saturday_Night_Live/</a></li> 
<li><a href= M http : //en.wikipedia.org/wiki/More_cowbell"> 

http : //en.wikipedia.org/wiki/More_cowbell</a></li> 

</ul> 




TW,s X_L as ^ ^ 

stvles av.a tV>e data tV>c sewer 

Y/vaffcd m / 奸丁 ML 
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innerHTML problems 


O 

o 


So heres what we 
need to get going on the server... 
this XHTML, with these values 
here... and here... 



Joe ， s*ti|| y/o\rkm^ 
oy \ 


J\H, d scv-vcv— side 

out team- 


and 扣 XttT/VIL 
semvem V-CSpo^SC. 


Jill: I don’t know, Joe. That’s a lot of formatting for the 
server-side guys to keep up with. 

Joe: But they’ve got all the data about the item, right? 

Jill: Well, sure... but server-side programmers don’t 
really like to mess around with XHTML. That’s the 
whole reason a lot of these folks move over to the server- 
side in the first place... no XHTML. 

Joe: But the CSS doesn’t change that much, so the 
XHTML won’t change that often. 

Jill ： Oh, the XHTML will change sometimes? 

Joe: Well, sure, maybe... but not very often. Only if we 
need to add a tag, or maybe an ID for CSS... 

Jill: Oh, no. You’re not going to be able to get server- 
side guys to write XHTML, and then change it all the 
time on top of that. 

Joe: Hmmm. This is sounding harder than I thought. I 
thought innerHTML was going to be really simple... 
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innerHTML is only simple for the 
CLIENT side of a web app 

From a client-side point of view ， inner HTML is pretty simple to use. 

You just get an XHTML response from the server, and drop it into a 
web page with an element’s inner HTML property. 

function displayDetails () { 

if (request.readyState == 4) { 

if (request.status == 200) { 

detailDiv = document.getElementByld("description"); 
detailDiv.innerHTML = request.responseText; 


The problem is that the server has to do a lot of extra work. Not only 
does the server have to get the right information for your app’s request, 
it has to format that response in a way that’s specific to your application. 
In fact, that format is specific to one individual page on your site! 


This is )<ML \respo 灼 se. |*t’s 

5 spcdi-f id -Pov-mat, bu 七 a^y app 
that v-cads XML- tav\ use 七 his. 


<?xml version= M l.0"?> 

<item id="itemCowbell n > 

<description>Remember the 
famous "more cowbell" skit 
from 

Saturday Night Live? Well, 
this is the actual cowbell〆/ 
description 〉 

<price>2 99.99</price> 
<resources> 

<url>http : //www.nbc.com/ 
Saturday 一 Night_Live/</url> 



TWlS IS to—c 七 ch/ 心 . • 

jus-t data- 


Web server 


itemCowbell 

Remember the famous "more 
cowbell" skit from Saturday 
Night Live? Well, this is the 
actual cowbell. 

299.00 

http: / /www.nbc.com/Saturday— 
Night_Live/ 





<p>Description : Remember the 
famous 'more cowbell' skit 
from 

Saturday Night Live? 

Well this is the actual 
cowbell.</p> 

<p>Price: $299.99</p> 

<ul> 

<li><a href= M http :// www.nbc. 
com/Saturday_Night_Live/ M > 

http :/ /www.nbc.com/ 
Saturday 一 Night_Live/</a></li> 

<li><a href= M http : // 



This ircspohsc ohly wov-ks -fov- 
a vc\ry XWT/WL 阿 . 

Po\r olho-thc\r page, you'd 

a -totally di-Pfev-eh-fc 
XWTML vcspohsc- 


H you were a server-side developer •“ wkick would YOU prefer? 
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csv seems simple 


o 


O 



Oiw Wis 

sti a 

C£\ / solut»oy\. 


FVa 灼 k’s still a 

*far> o()( 亂 . 


Look, this CSV thing is gonna get me 
that Les Paul, and quick. I just called the 
server-side guys; they said sending a 
response as CSV was no problem. 


Frank: I’m not sure ， Jim. Something’s bugging me 
about this CSV thing. 

Jim: What, just because I’m already almost done? 

Frank: No, seriously. It just seems so ... I don’t know. 
Inflexible? 

Jim: What do you mean? Here, look at my code to 
take the server’s response in my callback, and update 
the item detail for the page. It’s a little long, but it’s all 
pretty basic stuff: 


TW»s toAt vcwovcs a^Y 

added by 。吣 

tails {p 


function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

detailDiv = document • getElementByld ( ， ’ description ，，） 

dcta-jrlDiv. inncrllTML ^ request. responocTcKt; — ■ _ 


// Remove existing item details (if any) 
for (var i=detailDiv.childNodes.length; i>0; i--) 
detailDiv. removeChild (detailDiv. childNode^i-1 ]) 


IA/c ho loh^cv- 
USC ih^cv-l+TML. 



Fi\rst, wc yt the \rcspohSC- 
sepav-ate 

values us'm^ Commas. 


// Add new item details 
var response = request.responseText; 
var itemDetails = response 
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var description? = document.createElement( M p"); 
description?.appendChild( 

document.createTextNode("Description : " + 
itemDetails[1])); 

detailDiv.appendChild(description?); 
var priceP = document.createElement("p"); 
priceP.appendChild( 

document.createTextNode("Price : $" + itemDetails[2])); 
detailDiv.appendChild(priceP); 



S 。 “ CW 


)Nc 此 … c add a^o-tv^cv- 


var list = document.createElement( M ul"); 
for (var i=3; i<itemDetails.length; i++) 
var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.setAttribute("href n , itemDetails[i]); 




— 


a.appendChild(document.createTextNode(itemDetails[i])); 


Let s display -the URLs 
list items ih av\ 
uhov-dcv-cd list. 

它 URL y>es mb a 於 

<a>, v/WW，s added as 

<!»• 



li.appendChild(a); 
list.appendChild(li); 




detailDiv.appendChild(list); 


--- -^d "the <li> jets 

added io a <ul>". 


i\st dc-ta'iU <dw>. 


AH o-p this todc goes ih*to 
thu^bhails.js, mcpla^ihg the 
old vc\rsioh of displayPctaiUO 



货办货 e 它 n 

Why do you think the loop deleting any pre¬ 
existing elements from the details <div> counts 
down, instead of counting up? 



thumbnails.js 


1 K vouVc sW?cd, 

loop ay.d see 诜 at 吻⑽ Ca 十 
out ▲ 七、 on? 
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csv test drive 




Tesr DriVq 


Try out CSV for yourself. 

Download the examples for Chapter 9 from the Head First Labs website. Open 
thumbnails . j s, and make two changes: 



Update displayDetails () to match page 354. 



In getDetails (), change the URL of the server-side 
script to getDetailsCSV. php. 


Now try out the site. Does everything work? 


The downloads (ov Chaptcv- 
°{ i^ludc a sc\rvcv--sidc 
thoi-t v-cluv-hs CSV 
instead o( pla'm text. 



h n Kbl V 

hmf 川 糊 Jfrrr ■: 修 ^mrt^ 


J -!!a 


ROB’S ROCK VfO L V 


irf wy linr- I *a y ■釋 p«Ki« •: for Ihf r^kTm in 

bThnfl 嗌 # _ _ JfW* nwx\ 

liiv-df. 於 b " ivj ril wu- 

piK if* uT rflcN ftf-d nil 


Lxl dn iiTdif 1^ Ihf For m^Ef 


PnWP^iSn ： Ri 
frem Stlh ■物 i 


: Rpr^npfir % 

iai hf: 


m rjn^iK riflif 
■ w* , if££M4>(V 


Fv-1* S 淋 « 


1 1, : 




hiir. a Itn ■ 力 Si^M.3：C 


TWis looks # 七 … ^cve s a 
dcs6yr\ft'»o^, —6c, ad l ， s 七 

wru. 
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What is CSV again? 

CSV stands for comma-separated 
values. It just means that several values 
are put together into a single string, with 
commas separating each individual value. 

I’ve also heard about TSV. Is that 
similar? 

TSV refers to fad-separated values. 
The idea is the same, but tabs are used 
instead of commas. In fact, you can use 
anything you want to separate the values: a 
pipe symbol (|), an asterisk (*)，or anything 
else that’s a fairly uncommon character. 

Why do you need to use an 
uncommon character to separate values? 

If you use something common, like a 
period or letter, that same character might 
show up in your data. Then, your JavaScript 
might split the data incorrectly, giving you 
problems when you display or interpret that 
data. 


theretare no o 

Dumb Questi9ns 


In fact, CSV is a bit dangerous because an 
item description might have a comma in 
it. In that case, you’d end up splitting the 
description on the comma, and having all 
sorts of problems. 

So is that why we shouldn’t use 

CSV? 

Good question. Frank, Jim, and Joe 
are still debating the merits of CSV, but 
you could always swap out those commas 
for something else, and change your client 
code to split on that new character instead 
of commas. As for whether or not you should 
use CSV, you may want to keep reading... 

What is setAttribute()? I've never 
seen that before. 

setAttribute () creates a 
new attribute on an element. The method 
takes two arguments: the name of the 
attribute and its value. If there’s no attribute 
with the supplied name, a new attribute is 
created. If there’s already an attribute with 
the supplied name, that attribute’s value 
is replaced with the one you supplied to 
setAttribute(). 


What about childNodes? What’s 

that? 

childNodes is a property on 
every DOM node. The property returns an 
array of all the child nodes for that node. 

So you can get an element’s children, for 
example, and iterate over them or delete 
them. 

So why did you iterate backwards 
over the childNodes array? 

That’s a tricky one. Here's a hint to get 
you thinking in the right direction: when you 
call removeChild (), the node you 
supply to that method is removed from its 
parent immediately. 

That also means that all references to that 
now-removed node—say in an array full 
of an element's child nodes—have to be 
updated. Without a child to point to, all the 
child nodes that come after the removed 
node have to be moved up in the array. 

So if you iterated over an array like 
childNodes from front to back, 
removing nodes as you went, what would 
happen? 


What do you think Frank meant on the last page 
about CSV being inflexible? Are there problems 
with the server’s response being in CSV that 
adding new types of items might cause? 


you are here ► 


357 







xml is flexible 


Listen, can I get an item*s details in XML from the 
server? I*m already behind, but I still think - [here's 
a problem with that CSV solution. I want to get my 
XML-based version of the app working ASAP. 


Jill ： Sure, XML is easy. The server-side guys 
shouldn’t have any problem with that at all. It’s 
certainly a lot better than XHTML... 

Frank: Yeah, I heard Joe was working on that. The 
server guys couldn’t get him an XHTML response? 

Jill: Well, they could’ve，but nobody wanted to. 
XHTML is a mess to work with on the server, and it 
changes all the time. 

Frank: You know XHTML is just a flavor of XML, 
right? 

Jill ： Sure, but lots of people and apps can use XML. 
Dealing with a certain <div> with this id, or only 
using <p> r s and not <br /> r s... that’s pretty fragile, 

Frank: No kidding. Well, I Ve got to rewrite my 
callback, but let me know when the XML response is 
ready, okay? 


O 



FVa 灼 k’s asked Jill -fov 


some 


ddivide -fvoi 




scv-vcv--sidc pcv-spcdtivc. 


XML is pervasive in tke 
prog[rainining[ world* 11 
you responct in XML ， 
LOTS of JiWerent 

applications can work 

witk tkat XML resp onse 


therejctre no ^ 

Dumb Questi9ns 




What do you mean, “XHTML is just a flavor of XML ”？ 


A flavor of XML is like a specific implementation of XML, with certain 
elements and attributes defined. So XHTML uses elements like html and p and 
div, and then those elements are used along with attributes and text values. You 
can’t make up new elements, but instead you just use the ones already defined. 

With XML, you can define flavors like this—sometimes called XML vocabularies— 
and extend XML for whatever your needs are. That’s why XML is so flexible: it can 
change to match the data it represents. 
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You use the POM to work with XML, 
just like you did with XHTML 


Since XHTML is really a particular implementation of XML, it makes 
sense that you can use the DOM to work with XML, too. In fact, the 
DOM is really designed to work with XML from the ground up. 


Even better, the request object you’ve been using to talk to the server has 
a property that returns a DOM tree version of the server’s response. That 
property is called responseXML, and you use it like this: 

var responseDoc = request. responseXML; 


the se ^ ，把 


irpen your pen^l 一 


Draw a DOM tree for the XML response the server will send to Rob’s app 
(the response is shown below). 


XML, XHTML... it shouldn’t make much difference to an 
experienced DOM programmer like yourself. You’ve got two 
assignments: 



Write a version of the displayDetailsO callback in thumbnails.js that will 
use the DOM to get the various parts of the server’s response, and update 
the item’s details on Rob’s web page. 


<?xml version^"1.0"?> 

<item id="itemCowbell n > 
<description>Remember the 



TW»s id W. 1 I 70U 

奶 d 如 server m 呼辻 . 


famous "more cowbell" skit 


from Saturday Night Live? Well, 


cowbell.</description 〉 
<price>2 9 9.99</price> 
<resources> 





this is the actual 


TWirc Will always be a si^le 


<url>http :// www.nbc.com/Saturday_Night_Live/</url> 
<url>http : //en.wikipedia.org/wiki/More_cowbell</url> 


</resources> 
</item> 




The sewev £>3^ sc^d 3^ 
uy\l'iw'i'kcdi <Jc 

URLs -for catV) 
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return to the dom 



XML, XHTML... it shouldn’t make much difference to an 
experienced DOM programmer like yourself. You had two 
different assignments: 


Draw a DOM tree for the XML response the server will send to Rob’s app 
(the response is shown below). 

<?xml version= M 1.0"?> 

<item id="itemCowbell n > 

<description>Remember the famous "more cowbell M skit 
from Saturday Night Live? Well, this is the actual 
cowbell.</description 〉 

<price>2 99.99</price> 

<resources> 

<url>http :// www.nbc.com/Saturday_Night_Live/</url> 
<url>http : //en.wikipedia.org/wiki/More_cowbell</url> 
</resources 〉 

</item> 



TK'»S is s*tv*u£.*tuv-cd 

V,ke ><_L 七…， 

to 啪 ” 

o^-f v-oot clcw'C^t 


id, as y/cll as cM\\d v\odts. 
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Write a version of the displayDetailsO callback in thumbnails.js that will 
use the DOM to get the various parts of the server’s response, and update 
the item’s details on Rob’s web page. 

function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var detailDiv = document•getElementByld("description") 

// Remove existing item details (if any) 

for (var i=detailDiv.childNodes.length; i>0; i--) { 


^ ^ ihe tod, 

isTdt T ^ P ' 9C ' ，hclf 

^e\rsioh oh page 35 午 . 



detailDiv.removeChild(detailDiv.childNodes[i-1]) 


v-csfor\sc \v\ 

^ )<ML POM *br«. 




f Kc b '»5 is 

•m hov/ v/C 七 
v-csfoy\sc *fv-om sewev- 


Wt C,av\ get the 
<dcs^\ripitioh> clcnuCht, 
thch get its -fiv-st 

乙 hild: a tex-fc hode. 

FVom wc jus-t get 

"the text hodc^s value. 

Z 7 

saw yab *t^c 

clement yt »*b 
a^d yi 4a*t 

Y\odts value. 

r~^ 

^ get dll -the 

<i*lr|> dcmchts dhd 
loop thvough 從 h ohe. 


// Add new item details 

var responseDoc = request.responseXML; 

var description = responseDoc.getElementsByTagName("description")[0]; 
var descriptionText = description.firstChild.nodeValue; 

var description? = document.createElement( M p"); 
description?.appendChild( 

document.createTextNode("Description : " + descriptionText)); 
detailDiv.appendChild(description?); 

var price = responseDoc.getElementsByTagName("price n ) [0]; 
var priceText = price.firstChild.nodeValue; 

var priceP = document.createElement( M p"); 
priceP.appendChild( 

document.createTextNode("Price : $" + priceText)); 
detailDiv.appendChild(priceP); 
var list = document.createElement( M ul"); 

var urlElements = responseDoc.getElementsByTagName("url"); 
for (var i=0; KurlElements.length; i++) { 

var url = urlElements[i].firstChild.nodeValue; 

var li = document.createElement("li"); 
var a = document.createElement("a"); 
a.setAttribute("href", url); 

a.appendChild(document.createTextNode(url)); 
li.appendChild(a); 
list.appendChild(li); 

} 

detailDiv.appendChild(list); 


you are here ► 
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xml test drive 




Tesr DriVq 

And now for an XML solution... 

Open thumbnails . j s, and make two more changes: 

o Update displayDetails () to match the XML 
version of the callback shown on page 361. 

In getDetails (), change the URL of the server-side 
script to getDetailsXML . php. 

How does the XML version of Rob’s online shop look? 


rii 



h&l 秘 • 咖 li« 




个 i 

通 Mip ", 

ww hiit^rp 啡 Jk, 鴛奶 " n«rr» ' 

SQ + 

a 



TW»s looks just l'«kc 

如 CSV vevs ， or \， W 七 

vb’s yML* a 扒 d 

栋 c POM- 
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Hey guys... these are looking 
great. That CSV deal was quick! But Ive got one 
more change before I declare a winner... customers 
want more details specific to each item. So for 
rock memorabilia, I might have an artist name and 
band name, and for instruments I might have a 
manufacturer and year. No big deal, right? 


Rob wants data that changes 
depending on the request. 

If you ask the server for details about a guitar, 
you’ll get a manufacturer and year. Clothing? 
A manufacturer, sure, but also a size. And for 
bands, you’ll get a band name, and possibly 
the name of the individual in the band that 
the item belonged to or is associated with. 

How would handle a changing response 
from the server? And who’s better equipped 
to handle this new requirement? Frank, with 
his XML, or Jim, with his CSV? 


You my not have \nown, 


html 


Binary Tree Se 


Below are our fine 
binary tree oDtions:’’ 


You can view other 
oroducts in The 


Our 


trees are a favorite for 
nearby neiohbors." 


deoth 


readth-first 


Our 


trees are great for folks 
that are far away.’’ 


..that just as the browser sees your HTML as a DOM tree, web browsers 
automatically convert any XML they have to deal with into DOM trees. 

...that you can work with more than one DOM tree in the same JavaScript 
function. For example, you can read an XML DOM tree and update an 
HTML DOM tree, all at the same time. 

...that HTML elements and XML elements are both just element nodes in 
the DOM. There’s no difference between an XML type and an HTML type, 
at least when it comes to the DOM. 

...that the responseXML property always returns a DOM 
document object, even if that object is a single element, or just a 
single text node. 
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xml is really flexible 


c 


Joes st»ll 
>wovk — …办 
mv>cvHTML- 
v\^*b? 



This sucks! I*m going to have to rewrite 
my callback now. I built everything based 
on a description, price, and list of URLs. 


J'iw, 

^ CSV- 


5 

sim sc i 
伽 XML. 


You can’t always know in 
advance wkat tke data 
structure you get from tke 
server will look like. 

And even il you cto, tkat 
format miglit ckange... at 
anytime. 


Frank: Yeah, I’ve got a lot of changes to make, too. 

But I was thinking... Jim, how are you going to handle a 
changing response with your CSV? 

Jim: Well, I was thinking about that... 

Joe: Hey, guys, I had an idea. You know I’ve been 
doing some research — 

Jim: So I think what I can do is assume that every 
other value is a category, like “Description” or “Price.” 
And the values after each category are the actual 
category values, like the textual description, or 399.99, 
or whatever. 

Frank: Hmmm. Sounds a little hairy. 

Jim: It’s not too bad. Except for cases where there’s 
more than one value, like for those URLs? Then I think 
I have to check for maybe a special character before 
each category to indicate that it’s a multi-value category. 

Joe: Listen, guys, I wanted to show you — 


Frank: Wow, Jim, that’s nasty. Sounds like this latest 
change from Rob is really going to be a pain. 


Jii 


Yeah, it kinda is. But what else can I do? 
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Wouldn t it be dreamy if there was actually 
a data format that described itself? It could 
tell me what every bit of data was used for. 
But I suppose it's just a fantasy... 


you are here ► 
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xml is self-describing 


XML is self-dgscribmq 

The thing that’s cool about XML is that you can create your 
own vocabulary. XHTML is an XML vocabulary that’s specific 
to displaying things on the web. But suppose we needed a 
vocabulary for describing items, like at Rob’s online store. 

But the format can’t be locked into elements like <price> or 
<resources> because we want each item to define its own 
categories. We might use something like this: 


v-oo-t 

all 

七 he <ta 七 c W 
lewevrU ， jws 七 like 


c 


七 eleweyrt 
m ><_L 仏 . 


<?xml version="1.0 M ?> 


<item id="item ID n > 


<category> 

<name>Label for this category</name> 


The <6die^o\ry> 

匕 oKrta’ms -the label ar)d value (or 

bi*t o( nvfo\nrwa*tio 灼 v/e heed 

b> display. 


<value>The value to display for this category</value> 

</category> _^aiegov-y 

〈 category 〉 3 <h3mc> 3hd 

a <valuc>. They 

<name>Name of the next category</name> "the actual 

<value>Next value</value> wc 11 display. 

</category 〉 


〈category type= M list"> 

<name>Name of multi-valued category</name> 
<value>First value for this category</value> 
<value>Second value for this category</value> 


</category 〉 


</item> 


TV XML tav\ ^oh-taih as 你叫 <datcgov-y> 
clevis as hc^cssavy. \Nt Aot：i ^ccd io 
khow how r^hy thc\rc a\rc ov- what they 


\Afe tav^avc 七 •，- wWed 

date—a “ cvcv> 
rnd'^a-bc 从 a 七糾 从 

a 灼 atbr • 士 “ c 0 ^ 

<da*bc5° yr 7 > ' 七 ’ 
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rpen your pencil 


Here’s some more data from Rob’s inventory database: 


Item ID: itemGuitar 
Manufacturer: Gibson 
Model: Les Paul Standard 

Description: PeteTownshend once played this guitar while his own axe was in the 
shop having bits of drumkit removed from it. 

Price: 5695.99 

URLs: http://www.thewho.com/ 

http://en.wikipedia.org/wiki/Pete_Townshend 


How would you represent this item’s details using the XML format from the last page? 

Wrtc Y ou，r m 
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dynamic rock 



Here’s some more data from Rob’s inventory database: 

Item ID: itemGuitar 

Manufacturer: Gibson 
Model: Les Paul Standard 

Description: PeteTownshend once played this guitar while his own axe was in the 
shop having bits of drumkit removed from it. 

Price: 5695.99 

URLs: http://www.thewho.com/ 

http://en.wikipedia.org/wiki/Pete_Townshend 

Your job was to represent this in XML using the vocabulary from page 366. 


<?xml version= M 1.0"?> 
<item id="itemGuitar"> 


<category> 

<name>Manufacturer</name> 
<value>Gibson</value> 

</category 〉 

<category> 

<name>Model</name> 

<value>Les Paul Standard</value> 
</category> 

<category> 

<name>Description</name> 


Mosi of this is just %\\ -the b^ks" /ou 
dirop ih the o-P a ^ategov-y a^d i-ts 
value, a^d youVc all set. 


<value>Pete Townshend once played this guitar while his own axe 

was in the shop having bits of drumkit removed from it.</value> 
</category 〉 

<category> 

<name>Price</name> 


<value>5695.99</value> 
</category> 

〈category type= M list"> 
<name>URLs</name> 


7V\c URLs art a list, so wc V^avc -to sc*t 

-ty? c U ' ,s ^* 


<value>http :// www.thewho.com/</value> 

<value>http :// en.wikipedia.org/wiki / Pete—Townshend</value> 
</category 〉 

</item> 
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It’s time for the big finish (at least for now). Your job is to take what you’ve learned 
about the DOM, server-side responses in XML, and the format from the last few 
pages, and put it all together. Here’s what you’ve got to do: 


Change your request URL to use getDetailsXML-updated.php. That script is in 
with the other downloads for this chapter from Head First Labs. 


Rewrite the displayDetails() callback to work with the XML vocabulary we've 
been looking at. Remember, you may get more—or less—categories for 
different items. And you've got to handle those list categories, too. 


Test everything out! Once you’ve got everything working, turn the page to 
claim your Les Paul (at least, that’s what we hope)! 


tKereicire no ^ 

Dumb Questions 


So the big deal about XML is that it 
describes itself? That can’t be useful all 
that often... 

Actually, self-describing data is useful 
in a number of situations, just like here, with 
Rob’s online store. It's pretty convenient to 
be able to define elements and structure 
that’s suited to your business. 

Even better, XML is a standard, so tons 
of people know how to work with it. That 
means your vocabulary is usable by lots of 
programmers, in client-side and server-side 
programs. 


Wouldn’t it be easier to just make 
up our own data format? 

It might seem that way at first, but 
proprietary data formats—ones that you 
make up for your own use—can really cause 
a lot of problems. If you don’t document 
them, people may forget how they work. 

And if anything changes, you need to make 
sure everything is up-to-date: the client, the 
server, the database, the documentation... 
that can be a real headache. 


Okay, I get why we should use XML, 
but doesn’t it become a “proprietary data 
format” when we start declaring element 
names? 

No, not at all. That’s the beauty of 
XML: it’s flexible. The server and the client 
need to be looking for the same element 
names, but you can often work that out at 
run-time. That’s what’s meant by self¬ 
describing. XML describes itself with its 
element names and structure. 
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two dom trees 


SotytlOH 


It’s time for the big finish (at least for now). Your job was to take what you’ve 
learned about the DOM, server-side responses in XML, and the format from the 
last few pages, and complete an updated version of the displayDetailsQ callback. 


function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var detailDiv = document • getElementByld ("description ’'）； 


This is -the 
bcW. IVc s-tav-t by 
jettihg vid o-f 3hy 

cxis-tihg 匕。 irteht. 


// Remove existing item details (if any) 
for (var i=detailDiv.childNodes.length; i>0; i--) { 

detailDiv.removeChild(detailDiv.childNodes[i-1]); 








// Add new item details 

var responseDoc = request.responseXML; 

var categories = responseDoc.getElementsByTagName("category"); 
for (var i=0; i<categories.length; i++) { 

var category = categories[i]; 

var nameElement = category.getElementsByTagName("name")[0]; 
var categoryName = nameElement.firstChild.nodeValue; 

Wc dhcdk ^^ var categoryType = category. getAttribute ("type"); 

if ( (categoryType == null) | | (categoryType != "list")) { 

var valueElement = category.getElementsByTagName("value")[0]; 
var categoryValue = valueElement.firstChild.nodeValue; 
var p = document.createElement("p"); 


… "thch get 
"the 

"type o( 

七 n ^ 

see i-r rts a 

list l-f not- 

… 3 d: the 

vaU, a ^ 

add var text = document.createTextNode( 

text with the V 

a categoryName + " : " + categoryValue); 

value. 


TW»s y-b 

■比 s 

or 

3 如 、* 

a vaWc otV^cv' 
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xml requests and responses 


This blodk 
h^hdles lis-ts 
of values. 

Fiv-s-t, v/c jc*b 
all *bV^c values. 


Fov* v^luCj wc 
^dd dh <|i> -to 
Uhoirdcvcd list (<ul>) 



p.appendChild(text); 
detailDiv.appendChild(p); 
else { 

var p = document.createElement( M p"); 

p.appendChild(document.createTextNode(categoryName)); 
var list = document.createElement( M ul"); 
var values = category.getElementsByTagName("value"); 
for (var j =0; j<values.length; j ++) { 

var li = document.createElement("li"); 
li.appendChild( 

document.createTextNode(values[j].firstChild.nodeValue)) 
list.appendChild(li); 


detailDiv.appendChild(p); 
detailDiv.appendChild(list) 


Add bo-th -the list headi^ a^d -the 
list itsd-f -to the <div>. 


Check it out... this is even better than my old 
version! I can handle anything now, including 
those multi-valued categories. Hey, how’s your 
CSV coming along? 



O 



TWmv doh-t look like tk'/Vc 叫 


y/cll -for K»S CSV solution. 


so 
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xml rocks 




Tesr DriVq 


Test out the new ， improved, more flexible version of Rob’s page. 

Once you’ve got all your code updated, let’s take it for a spin, and show Rob what 
we’ve come up with. Here’s what the page looks like now: 


^ ^ to 
"the UR.L ih youv* 

lrcqucs*t 

rUh^ioh ； "too. 



Beautiful." y\o 

)<ML scr\ds, ouv pay 
displays i*t. 


^li'-valucd daia 

woirks, -too. 
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xml requests and responses 


命 


命 


WVUCM O 奴 



命 




Welcome to this week’s edition of “Which Data Format?” You’ve got to decide 
which data format is best for the 5 examples below. Be careful: some are requests, 
while others are responses. Good luck! 

Text or XML 




Top 10 iTowes 
downloads of 
2007 


h ' 



* 


* 


r~: 




> 


Request 切 day's 
house blend 




* 


* 




Update journal 
with wcw entry. 




* 


* 


M- 


Number of 
hobbits that fit 
rna Volkswagen 




* 


* 


ear?_ 





Play "Whew It 
Falls" next 




* 


* 


•//Co 杳 J ▲ 
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another contender? 



r 

RoWs ^ 

/MU soWt 、。 作 


Wltat’s Joe talking about? 

Wkat ever kappened to innerHTML? 
And kow ctoes ke plan to top XML? 


Hold it right there. Ive got 
something you need to see before 
you go handing out that guitar. 
Waif II you see Chapter 10... 


This looks fantastic, and I don’t 
have time to wait on anyone else. 
Frank, I love the XML approach. So 
the ies Paul guitar goes to— 


> 
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Find tke answers to tkese questions 

and more... all in Ckapter 10. 


Us Joe, 

^cdovcmed 

各。州 his 

仏 Ues wi-th 
“cirWT 亂 





xml requests and responses 



)OVlLAcrostic 

Take some time to sit back and give your right brain something 
to do. Answer the questions in the top, then use the letters to fill 
in the secret message. 


Our original version put pre-formatted XHTML in this property: 


1 23456789 

We addded a <br> element to the detailDiv to do this: 


10 12 13 14 15 16 

This property of the request object contains text returned by the server: 


17 18 19 20 21 22 23 24 25 26 27 28 

The response to our request is generated here: 


29 30 31 32 33 34 35 36 37 38 

The browser puts the XML DOM into a property of this object: 


39 40 41 42 43 44 45 

This was our client in this chapter: 


46 47 48 










27 8 

9 1 

1 44 

32 

4 

39 

48 21 

35 4 

48 

42 28 

10 9 

40 

27 

36 

48 9 

30 
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exercise solutions 



)OVlLAcrostic 

Take some time to sit back and give your right brain something 
to do. Answer the questions in the top, then use the letters to 
fill in the secret message. 


Our original version put pre-formatted XHTML in this property: 

I 

~ 2 3 4 5 6 7 8 9~ 

We addded a <br> element to the detailDiv to do this: 

FORMAT 

"To 12 13 14~~15 16 - 

This property of the request object contains text returned by the server: 

RESPONSETE><T 
17 18 19 20 21 22 23 24 25 26 ~27 28~ 

The response to our request is generated here: 

SERVER — S I V E 

"^9 30 31 32 33 34~ ~35 36 37 38~ 

The browser puts the XML DOM into a property of this object: 

REQUEST 

~39 40 41 42 43 44 45~ 

This was our client in this chapter: 

ROB 

~46 47~ 48 


>< 


L 

s 



R 

B 

0 

£ 

B 

27 

8 

9 1 

1 44 

32 

4 

39 

48 

21 

35 

4 


B 

U T 

F L 

E 

>< 

1 

B 

L 

B 



48 

42 28 

10 9 

40 

27 

36 

48 

9 

30 
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xml requests and responses 


命 


命 


WVUCM O 奴 



命 




Welcome to this week’s edition of “Which Data Format?” You’ve got to decide 
which data format is best for the 5 examples below. Be careful: some are requests, 
while others are responses. Good luck! 

Text or XML 




Top 10 iTowes 
downloads of 
2007 




<?php I 

require('lib.php•) ;■ 

function go () { Ml 
$myVar = . . . | :| 

return ... I 


♦ 





Request 切 day's 
house blend 





〆 * 


X/WL is id e3 i 



Update journal 
with wcw entry. 


for all i^csc 

v-c<\vaCS*U) 
y\OV*mdl VC'WCst 
pavawc 七於 


lork -f mc. 


Because "the jouirhal is 

probably sWWd 

XML might 

be a good t\\o\U, -too. 


M- 


Number of 
hobbits that fit 
rna Volkswagen 


FTfLL 









Play "Whew It 
Falls" wext 




* 

Kkuw'bcv >s bes 七 

vc^vcsc^tcd 3 s 

♦ 
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10 json 




SON of JavaScript ♦ 



JavaScript, objects, and notation, oh my! 


If you ever need to represent objects in your JavaScript, then you’re 
going to love JSON, JavaScript Standard Object Notation. With 
JSON, you can represent complex objects and mappings with 
text and a few curly braces. Even better, you can send and receive 
JSON from other languages, like PHP, C#, Python, and Ruby. But 
how does JSON stack up as a data format? Turn the page and see... 


this is a new chapter 




data format debate 



' h Chap*tc\r 


JoC, 


Joe, buddy, I don’t know what you 
think youve got, but my XML solution is 
perfect. Do you see this thing running? 
IVs flawless! 


Joe: I think we might have different definitions of flawless, 
man. Two DOM trees to work with, and dealing with 
whitespace in the server’s response? 


Jim: That’s a good point, Frank. Did you even check for 
whitespace nodes? 


Frank: No, but that’s easy enough to add in 


Joe: And your code will get even more convoluted. 


Frank: Hey, at least my code works. And that CSV stuff was 
a total bust. 


Jim: It worked great! At least... well, it worked pretty well 
until we had data where the structure changed depending on 
the item. 




Joe: So you’ve got broken GSy or convoluted XML. What a choice! Good thing 
there’s another option. 

Jim: What? What did you find? 

Frank: This better not be another innerHTML fiasco... 


Joe: I found JSON! 

Jim and Frank: JSON? What the heck is that? 

Joe: JSON is JavaScript Standard Object Notation. It’s a way to represent a JavaScript 
object in plain text. So the server can send us JSON — which is just text, no XML or 
DOM issues to deal with — and our JavaScript can work with that response as an object. 

Jim: What’s the big deal about that? 

Frank: Hmm. Well, if Joe’s really onto something — 

Joe: I am! 

Frank: — then you wouldn’t need all this DOM stuff, or even split () and other 
text manipulation code. You could just say, for example, var description = 
itemDetails . description. That would be pretty cool. 

Joe: Look, here’s how it works... 
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json 


JSON can be text ANP an object 


With GSy comma-separated values, the CSV data was pure text. 
The server sent over the text, and our JavaScript had to use string 
manipulation routines like, split (), to turn the string into 
individual pieces of data. 



itemDetails = response . split 



Web server 


With XML, the server sent text over, too, but that text was self¬ 
describing. So we could get a DOM representation of the text 




Web server 


But suppose we had a way to get text from the server, and then 
treat that text as a JavaScript object. Instead of using string 
manipulation or DOM methods, we’d just use code like item. 
description or itemDetails . urls. In other words, 
we’d have a format that was represented as text for easy network 
transmission, but an object when we needed to work with the data. 


description = item.description; 




Web server 


^Sharpen your pend 

SuppoLyou 


had an item’s ID, description, price, and a list of 
URLs for that item. What do you think an object representing that 
information might look like? Draw a circle for the object below, and 
then add in whatever fields you think the object might have. 
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json is javascript 



irpen your pencil 
k Solution 


—Vvt bcs 七 be 
called \^Pcta«is, ov 
somC*t^>^5 I 七 

doesn't \rC?v*CSCvA 办 

•，七 Cm, W 七 mbn^a 七咖 
aWb 如 w . 


Suppose you had an item’s ID, description, price, and a list of URLs for that 
item. Your job was to draw what you thought an object representing that 
information might look like. 



id, desdmip 七 icm, and pvidc avc jus-t 
pv-opcvtics o( 七 he object 




JSON data can be treated as a 


JavaScript object 


When you get JSON data from a server or some other source, 
you’re getting text... but that text can easily be turned into a 
JavaScript object. Then, all you need to do is access that object’s 
fields using dot notation. Dot notation just means you put the 
object name, and then a dot, and then a field name, like this: 

var weakness = superman.weakness; 


.一 the 5 崎 ih a “ 


For instance, suppose you had an object like the one shown in the 
solution above. How do you think you’d access the value of the 
description field? 


If you’re looking at your answer, and thinking it’s too simple, then 
you’ve probably got things just right. Working with JavaScript 
objects is about as easy as it gets. 
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json 


So how do we get JSON data from 
the server's response? 

When a server sends its response as JSON data, that data comes 
across the network as text. So you can get that data using the 
responseText property of your request object: 

var jsonData = request.responseText; 




EiceitciSe 


Let’s see exactly what the server responds with... then, we 
can figure out how to turn that response into something we 
can work with. 


Download the examples for Chapter 10, which include a JSON- 
specific version of the server-side script, as well as a JSON 
library that script uses. 

Change the request URL in getDetails() (in thumbnails.js) 
to point to the JSON-specific script, getDetailsJSON.php. 
Everything else about the request should stay the same. 

Get the textual response from the server, and display it using 
an alert() or some other JavaScript output function. What does 
the response look like? 
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first look at json 



What did the server respond with? Does it look like a JavaScript object? 


Download the examples for Chapter 10, which include a JSON- 
specific version of the server-side script, as well as a JSON 
library that script uses. 

Change the request URL in getDetails() (in thumbnails.js) 
to point to the JSON-specific script, getDetailsJSON.php. 
Everything else about the request should stay the same. 


var url= ’'getDetailsJSON• php? 工 mageIE> 


TWis is i\\t I'mc >/c used 
actPcU.lsO 妊吐 

a v-cs^onsc -fv-OW 
scv-vcv--s'idic 七 . 


escape(itemName); 


Get the textual response from the server, and display it using 
an alert() or some other JavaScript output function. What does 
the response look like? 

, a |lba^k. 


alert(request.responseText); 


Here’s wlia*b wc y>i vcloadm^ 
七 lie mvc^-tov-y pay ， 
c\\ck\^ ov\ —lav 





The at Pitt / wwadfi 4 fit 3 ab^x^ni ^iiys: 

nn uripHnn" e Tnwnshend plAypd rhh guitar whi『p h\n own axe iin thi? shnp 
JiaUng blis of drumkEi femoved from 

it." ,™pri 广 uriK r ■ 厂 hrtp/www.thnpwhn.r nm'jl n ,"lhitlp -\/\i pn.wi kijvdiA. nrgPelp_T awn q hp rvri n ]J 


OK 


Wkat tke keck is tkis? Anct wkat cto we DO witk it? 
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json 


JavaScript caw evaluate textual data 


JavaScript is pretty good at turning text into objects, functions, and 
lots of other things. You can give JavaScript some text, and it’s 
smart enough to figure out what that text represents. 


For example, remember how we’ve been assigning event handlers? 


image.onclick = function () { 



var detailURL = 'images/' + this.title + '-detail.jpg 


H looks like weV. 


document • getElementByld ( "itemDetail，'）• sre 二 detailURL; 
getDetails(this.title); 


JavaScript takes this textual function, and creates an actual function 
in memory. So when an image is clicked, the function code sitting in 
memory is executed. That all happens behind the scenes, though, and 
isn’t something you need to worry about. 

But what about when you have text, and you need to TELL JavaScript 
to turn it into something more than text? 

{"id" : "itemGuitar ", 

"description" : "Pete Townshend once played this guitar 
"price":5695•99, 

"urls" : ["http :// www.thewho.com /", 

"http : //en.wikipedia.org/wiki/Pete_Townshend"]} 


Use evalO to manually evaluate text 



This vcsfoir>sc -fv-om *tKc 
scv-vcv- looks like I 七 、 a 

七 ell 

JavaSdvift *to *tuvr\ 七 iVis "m*to 

v/C use? 


pvopcvty v>amcs air>d 
values … bu*t Kov/ dan v/e 


The eval () function tells JavaScript to actually evaluate text. So 
if you passed the text describing a statement to eval (), JavaScript 
would actually run that statement, and give you the result: 


alert(eval ("2 + 2 "))； 

JavaSoft evaluates *tKc ^ 

W Z + 2." •• 广 

."3hd tuV"hS i-t ih"to the 
Z + Z... 


4 



evaluates 

V"C*tuV")r\nr\^ result 
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evalQ json data 


Evaluating JSON data returns aw 
object represewtatiow of that data 


So how does this apply to JSON data? Well, when you run eval () 
on text that describes a set of property names and values, then 
JavaScript returns an object representation of those properties and 
values. Suppose you ran eval ( ) on this text: 

{"id" : "itemGuitar ", 

"description" : "Pete Townshend once played this guitar ... 
"price":5695•99, 

"urls" : ["http :// www.thewho.com /", 

"http : //en.wikipedia.org/wiki/Pete—Townshend"]} 

JavaScript figures, “Hey, this looks like an object.” So it turns this data 
into an actual object, and returns that object: 



id 


itemGuitar' 


h^mc/valuc gc-ts 


itemDetails 


description = "Pete Townshend once 
played this guitar..." 


price 


5695.99 



■ urls 




http :/ /www.thewho.com/ 9 


1 http : //en.wikipedia.org/wiki/Pete Townshend n 




Put there's owe catch... 


TV>c urls a^ay 

•m*to a fv-opev-iy …狀 孙 
av-v-ay Koldm^ »*b values. 


It looks like the object JavaScript creates from a JSON response is perfect for 
Rob’s rock inventory page. There’s just one thing to watch out for. You need to 
make sure that the overall JSON response string is seen as a single object. So 
when you call eval () ， wrap the whole response in parentheses, like this: 


| eval( 





data string 


pav-cr\*tiicscs says -to JavaScript 
w T\rca*t ^is all as ONt THIN4'' 



This last pavchthcscs doses 
the cvalO s-b-tcmchi 
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json 


thereicire no ^ 

Dumb Questi9ns 


Do I need any special libraries to 
read JSON data? 

No. eval () is built into JavaScript, 
and it’s all you need to turn JSON data into a 
JavaScript object. 

Q/ Why should I mess with eval()? 
Couldn’t I just parse the raw text from the 
server? 

You could, but why bother? eval () 
turns all that text into a very simple object, 
and you can avoid counting characters and 
messing with split (). 

eval() just stands for evaluate, 

right? 

Right, eval () evaluates a string. 


Q/ So eval() runs a piece of text? 

Well, not always, eval () takes a 
string, and turns it into an expression. Then, 
the result of that expression is returned. 

So for a string like “2 + 2”， the expression 
would be 2 + 2 , and the result of that 
expression is 4. So 4 is returned from 
eval ( n 2 + 2 ’▼); 

But take a string like '{"id^ltemGuitar'V'price 
”:5695.99”} ■’ Turning that into an expression 
and executing the expression results in 
a new object, not a specific “answer ■” So 
sometimes eval () doesn't really run text 
as much as it evaluates (or interprets) text. 

What are those curly braces around 
everything in the server’s response? 

JSON data is enclosed within curly 
braces: { and }. It's sort of like how an 
array is enclosed within [ and ]. It's just a 
way of telling JavaScript, “Hey, I’m about to 
describe an object." 


And each name/value pair in the 
text becomes a property of the object and 
a value for that property? 

Right. The text “id”:”itemGuitar” in 
an object description tells JavaScript that 
there’s an id property, and the value of that 
property should be “itemGuitar.” 

What about the urls property? That 
looks sort of weird. 

urls is an array. So the property name 
is “urls，” and the value is an array, indicated 
by those opening and closing square 
brackets ([ and ]). 



You’ve got a script that returns JSON data, and now you know how to convert that response into 
an object. All that’s left to do is use that object in your callback. Open up thumbnails.js, and see 
if you can rewrite displayDetails() to convert the JSON data from the server into an object, and 
then use that object to update Rob’s inventory page. 
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json in action 



You’ve got a script that returns JSON data, and now you know how to convert that response into 
an object. Your job was to use that object in your callback. How did you do? 


function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var detailDiv = document • getElementByld ( ， ’ description"); 


Mos^ o-p -this 

io update 
■the display of 
the page itscl-P 
•s ideir&Gl 
七 he )(ML vcv-sioh 

A 。 啪 Chaptcv- % 



Hcv-c s y/Kcv-c ask JavaSdv-^*t 
-bo *tKc sevWs 

v-cs^or\sc m*to 扣 object. 


+ request.responseText 


var itemDetails = eval( 


// Remove existing item details (if any) 
var children = detailDiv.childNodes; 
for (var i=children.length; i>0; i--) { 

detailDiv.removeChild(children[i-1]); 





C 如 


Theme s ho heed -Pov- usiha 

io get values the 

se\rv 饮 with J£0K 




// Add new item details 

var description? = document.createElement( M p M ) 
description?.appendChild( 

document.createTextNode("Description : " + itemDetails.description)); 
detailDiv.appendChild(description?); 
var priceP = document.createElement("p"); 
priceP.appendChild( 

document.createTextNode( M Price : $" + itemDetails.price)); 
detailDiv.appendChild(priceP); 
var list = document.createElement( M ul"); 
for (var i=0; i<itemDetails.urls.length; 
var url = itemDetails. urls[i]; 
var li = document.createElement("li"); 
var a = document.createElement( n a"); 
a.setAttribute("href ", url); 

a.appendChild(document.createTextNode(url)); 
li.appendChild(a); 
list.appendChild(li); 


^r 

i++) 



dc*b3>U about 
cacM rtem is really simple 


detailDiv.appendChild(list); 




1l ' S 心“吆如心 

D 。 卜 

hk v ^ioh is beii^ otr 
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Q/ This is all just about a data format, right? 

That’s right. Any time you send information between your web 
page and a server, you're going to need some way to format that 
information. So far, we've used plain text to send requests, and text 
and XML to retrieve responses. JSON is just one more way to send 
data back and forth. 

If we’ve already got XML and text as options, why do we 
need JSON? 

Since JSON is JavaScript, it’s often a lot easier for both 
JavaScript programmers and browsers to work with. Also, because 
JSON creates a standard JavaScript object, it winds up looking more 
like a “business object” that combines data and functionality, instead 
of an untyped XML DOM tree. You can create similar objects from an 
XML response, but it requires a lot of additional work, with schemas 
and databinding tools. 


So JSON does things XML can’t do? 

It’s not so much that it does more; JSON actually does fewer 
things than XML. But what JSON does, it does simply and elegantly, 
without a lot of the overhead that XML requires to do all the bazillion 
things a more fully-featured markup language was designed to 
handle. 

Can we go back to syntax? I’m still a little fuzzy on the 
textual representation of an item. Can you explain how that’s 
working again? 

The curly braces, { and }, define an object, which is an 
unordered set of name/value pairs. Square brackets, [ and ], 
indicate an ordered array. In your code, you reference elements 
inside curly braces by their name, but the ones inside square 
brackets are referenced by number. Here’s a closer look: 


itcruDctails. 


The 

i^didates the 
sta\rt of av\ av-v-ay. 



itemDetailS,urls[0] 


||temDetails.urls[1] 

itemDetails.urls[2] 



丁 he opch'mg bva 匕 e 

ihdi^aics "that thcv-c 
,s uhoirdcvcd sei o( 
clcmchts ih the object. 


itemDetails 

” id n : "itemShades", 

” description” ： n Yoko Ono▼s sunglasses. 

•Drice” ： 258.99, ” 

^ [ n http : / / www.beoS^les . com/ r 

'http :/ /www.johnrvnnon.com / n , 

I http : //www.yoko - Qio.com/ ] 


a^css -the elemchts 
° + a^ay usi% the 

o 4 - the av-v-ay 
and "the ihdex -fov- the 
elemcivt -that you wahi 


itemDetails.description 


itemDetails.price 


Values *m tuv-ly bv-adcs 
av-c attessed fey 
^vo^cv*bY 3 *(* "tcv* 
七 V>c object Mwe. 
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test drive 




Tqst DriVQ 


But does JSON actually impress Rob? 

The code looks a bit simpler, and there’s one less DOM to work with. But does the 
JSON version of Rob’s inventory page actually work? Change your callback to match 
the version on page 388, update your request URL to getDetails JSON . php, and 
try out the new version of the inventory page. 



Watek it! 



Be sure you 
have JSON.php 
along with the 
JSON server- 
side script. 


This look ^^i like ih e y ML 


The server-side scripts for this 
chapter require JSON.php, 
which comes with this chapter’s 
downloads. Be sure you have 
all those files before going on. 


is used by *bV^c 
scwcv-sidc stv-if*t m 七 Wis 
l*t i^a^dlcs some 
PUP—spctl-Plt issues 
dedl'm^ Villi JSON easier 
scv-vcv. 
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json 


O 

o 


Look, Joe's using the old specs for the 
site. Rob wants to send dynamic data, like 
group names and artists and hat sizes. 





Fvar>k, v/iio 七 iiou # 七 
Kc \\ad Lcs Paul 
^urtav m ba^- 


jus-t 

Joe wi h . 


Frank: You’re right! His JSON code doesn’t really help much in 
that case. His code depends on knowing the names of the object’s 
properties. 

Jim: Exactly. And there’s no way it works with dynamic item 
descriptions, where the property names change. 

Frank: Hmmm. You know, I was able to solve that problem with 
XML. I wonder if Joe — 

Jim: No way, man. You’ve always read the name of properties from 
your element’s tag names. His code has the property names as part 
of the code... they’re not even parameters to search methods like 
getElementsByTagName (). 

Frank: You’re right. I’ll bet this will hang him up pretty good. 



What would a JavaScript object that had to change 
based on the specifics of an item look like? 
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javascript is interpreted 


ft t 


JavaScript objects are AIREAPY dynamic 
because they Ye wot COMPlUg objects 


In compiled languages, you define your objects in a source file, like a . j ava or 
. cpp file. Then, you compile those files into bytecode. So once your program’s 
running, you’re stuck with the definitions that are compiled into bytecode. 

• |S ^ 0 v In other words, a Car object can’t suddenly have a new manufacturer 

property without recompilation. That lets everyone who’s using the Car object 
todc. know what to expect. 

JavaScript, however, isn’t compiled; it’s interpreted. Things can change at 
any time. Not only that, but the objects the server sends are created at runtime, 
using eval () . So whatever’s sent to our JavaScript, that’s what we get in the 
itemDetails object. 

〜 alO docsv\i }r\ttA bo know wha-t k'md o( 
objcdi i-t's ahead of -time, li jusi 

evaluates -the you give i-t. 



var itemDetails = eval (' (' + request.responseText + ') *); 





TVis is the object Wvc been 
us'm^ so 狄 … bask pvopcvtics 

apply *to all items. 


TW»S yJCrs\ov\ 

V,as W ^ " 十 : 




This ob\^i has a hew e, 0 \o\r 
pv-opcirty ahd a hew 'Wh by w 
P'ropc^y with ah av-v-ay values. 


We cton’t neect to ckangfe our object at all! We just 

neect to know kow to figure out wkat^s iNf tke object. 
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json 


You can access an object's members... and thew 
get an object's values with those members 

JavaScript will tell you what properties an object has. You just have to ask it, using the 
for/in syntax. Suppose you’ve got an object called itemDetails, and you want to 
know what properties itemDe tails has. You’d use this code to get those properties: 


for (var property in hero) { 

alert("Found a property named : " + property); 


Pretty simple, right? So the variable property would have values like id, 
description, price, and urls. 

But we don’t want just the property names; we also want the values for 
each property. That’s okay, though, because JavaScript lets you access an 
object’s properties as if the object were an array. But instead of supplying 
an array index, like itemDe tails [ 0 ], you supply a property name, like 
itemDetails["price"]. 


In other words, the value returned for itemDetails [ "price" ] for an 
object is the value of the property named price in that object. 



itemDetails["id"] 

itemDetails["description"] 

itemDetails["price 

么 - 

itemDetails[ M urls n ] [0] 


These lihCS o-p Codt "tlic 

values o-P the pvopcv-tics 

■tk iicrmDc-hils object 


ih 



itemDetails[ M urls n ][1] 

itemDetails["urls M ] [2] 
itemDetails["urls"] 


TKc value of rte 州 uv *l s ] 

- \s ar\ … 

,. . . which Uh thch be 3Ucssed 

[ 3 ]^I ^仙州 Clrid ihdex. 




E 從 ftciSe 


You know what to do. Update your version of the inventory page to work with dynamic data from 
the server. You never know what you’ll get... just that the server will return an object in JSON 
format with properties and values for those properties. Good luck! 
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is it an array? 



Hold on there. I got the single-valued 
properties working, but how am I supposed to 
deal with arrays? How do I know if a property 
value, like urls, holds an array? 


JavaScript does NOT give you a built-in 
way to see if a value is an array. 

Dealing with dynamic data is tricky business. For 
instance, when you write in your code itemDetails . 
urls, you know that the value for that property will 
be an array. But what about itemDetails [proper 
tyName] ? Is the value for that property an array or a 
single value, like a string? 

Unfortunately, JavaScript doesn’t give you a simple way 
to check and see if a value is an array. You can use the 
type of operator, but even for arrays, type of returns 
“object,” and not “array” like you might expect. 

To help you out, here’s a little Ready Bake Code that 
will tell you if a value is an array or not. Add this 
function to the end of thumbnails . j s, and then 
see if you can finish up your exercise from the last page. 


isAv-v-ayO v-rtuvhs 
tv-uc i+ you pass it 

艺 h 針 ay value, ahd 

-rdlsc i-f y ou pass it 

somethihg else, like 
5 value. 




function isArray(arg) { 

if (typeof arg == ’object') 


- 7~ 

/\v*v*ays av-c all do^sidcv-cd objcdxs 


by JavaSdv-ift 


var criteria = arg.constructor.toString().match(/array/i); 

All avv-ays have a wstvu 如 r $ 
y/ovd w avv-ay , m 


return (criteria 


null); 


V 


匕 or\s*bru^tov. 


return false; 


瓜丫 object that has that 

K Ihc is ah amray. 

object, i^s ⑽七扣 av-v-ay. 


/ \dd 七 his eyrtive 

Cir>d o( *thumby>ails.js. 


Mt 


k 卿 _ 




The u i w at 
the Chd 

i^ho\re 
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You know what to do. Update your version of the inventory page to work with dynamic data from 
the server. You never know what you’ll get... just that the server will return an object in JSON 
format with properties and values for those properties. How did you do? 


function displayDetails() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var detailDiv = document • getElementByld (’'description ，'）； 


Rcwcwbcv- *to 一 

add 

"to VOUV toAt) ov 
-tWis JavaWi ? 七 
’七 Y/OV"k. 


var itemDetails = eval('(* + request.responseText 
// Remove existing item details (if any) 
var children = detailDiv.childNodes; 
for (var i=children.length; i>0; i--) { 

detailDiv.removeChild(children[i-1]); 


)； 



WotUg’s dhahgcd ih this 
sc^tioh... -this just c\tS 
ou 七 existing doh-tcht. 


v-s 



七 Wo— caA 
Ytrbj object. 


// Add new item details 
for (var property in itemDetails) { 

var propertyValue = itemDetails[property]; 

^ if (!isArray(propertyValue)) { 令 _ 

var p = document.createElement("p"); 
p.appendChild( 


S*tav**t by ybt … 3 pv-opev-ty^s value 

BY\d seeing i-f that value is by\ av-v-ay. 


propertyValue)) 


)) 


document. createTextNode (property + ’，： " + 
detailDiv.appendChild(p); 
else { 

var p = document.createElement( M p"); 
p.appendChild(document.createTextNode(property 
var list = document.createElement( M ul"); 
for (var i=0; i<propertyValue.length; i++) { 

var li = document.createElement("li"); 
li.appendChild(document.createTextNode(propertyValue[i])); 
list.appendChild(li); 


Sihglc-valucd 

p^ropc\rtics av-c easy. 
^ heed a <p> 
ahd some text 



pv-ofcv**b»cs, v/c *to 

?呼矿切 v 丄 cs . 


detailDiv.appendChild(p); 
detailDiv.appendChild(list); 


^ 说 h value ih the 

a hCW <|i> 

add the value *to it 
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it is an array! 




Tqst DriVQ 


JSON testing, part deux 

Now our code handles dynamic objects, values that might be strings or arrays, and 
should run like a dream. Let’s see the new-and-improvedJSON page... 







Do you think isArray() belongs in thumbnails.js or 
utils.js? Put the function where you think it really 
belongs, and make any needed changes to the 
rest of your code now. 
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I love this JSON stuff... my engineers tell me 
you’ve got the simplest and cleanest code of all 
the solutions so far. But there are some problems. 
Whafs that ''id ： itemHat" thing? And why are the 
labels all lowercase? 


Good property names aren’t usually 
good label names, too. 

Take a close look at the property names for an item’s 
description: 


json 


TV^csc t 

look boo yeat 


也 Mai 


□i^crlpLn:Jd£AM3i % hn£ Man ti I hr mlU u 
Jr. in Nr^ ii a .illy neck imrmci.ihill.i, but It 

lai-Urr th.in SL.idi\ Enffiliiit. 






+ lut |K / /wiww.mKliai'lJ.irMDn .gettiV 
• liLEfi :} /vnu^li; .^^m.Ecvn/v'd Klllik 1 」 i_jn 


We’ve been printing out the property name and then the value 
for that property. But those property names look more like code 
than “human speak.” 


Not only that, but the ID of each item is showing, too. That 
could wind up being a real security bug down the line. 


What would YOU do to fix these problems? 
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be careful with eval() 


Those aren’t the only problems. eval()s not 
safe to use like that... do you realizeyoure 
evaluating text from another source? 


o 


Joe: Well, yeah, that’s kind of the point. 

Frank: Do you really think that’s a good idea? Just running code 
that someone else gave you? 

Joe: I’m not running it, I’m evaluating it. Haven’t you been paying 
attention? 

Jim: Someone’s getting cranky that their JSON solution isn’t so 
easy... 

Frank: Whether JSON 5 s easy or not, you can’t just evaluate that 
code blindly. What if it’s malicious code, like a script that hacks 
the user’s browser or something? Or it redirects their browser to a 
porn site? 

Joe: Are you kidding me? It’s Rob’s server, for crying out loud! 

Frank: What if it’s not correct JSON? What if there’s an error? 
Evaluating code with an error in it is going to generate errors for 
the users? 



Jim: Sounds pretty dismal, Joe... 

Joe: You’re both just annoyed that I was gonna win that guitar. 

Frank: Hey, safety first, man. I’m telling you, you can’t go around 
using eval () on code that you don’t have any control over. 

Joe: Great. Now what am I gonna do? 


这货 _ 

Ajax request objects can only make 
requests to programs on the same server 
that the JavaScript creating the request 
was served from. Does that reduce, 
increase, or change the dangers of using 
eval() on a server’s response text? 



evalO evaluates 
wkat you give it, 

WITHOUT regard 

lor tke results oi 
tkat evaluation. 

You ONLY kave 
ctirect control oi 
evalO cocte. 
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json 


You need to PARSE the server's 
response, wot just EVALUATE it 

Galling eval () initiates a simple process: take a bit of text, and 
evaluate that text. What we need is an additional step. Suppose we 
could take a bit of text, and make sure it’s actually JSON-formatted 
data. Then, we could reasonably assume it’s safe to evaluate that data, 
and turn it into a JavaScript object. 

That extra step — parsing the data and making sure the data isJSON — 
protects us from two important potential problems: 

o We’ll know that the data is safe to evaluate, and not a 
malicious script or program. 

❺ We can be sure that not only is the data JSON, but it’s correctly 
formatted JSON and won’t cause our users any errors. 


Fortunately for Joe (and us!), the JSON website at 
http : / / www. j son . org provides aJSON parser that does all of 
these things, and more. You can download a script fromjson.org called 
j son2 . j s, and then use this command to parse JSON-formatted data: 


v)avaS_ 七 6odc, ov 

?ass a 

w |s *tWis OSOK?'' -test 



Pams 饮 cv-v-ovs 

代 port them, ihstead o*P just 

9 ivih 9 U P ^ 



/ou st«ll y^ccd ^ ass.^ 
result 如 ?avseO 

WW a vav»aWc. 


TV»s JSON object is 

heated jsor\l js 

\s -f ivs-b loaded by *biic 
y/eb byoy/sev-. 


pairs〆）takes ih a stv-ihg 
v*c*tuv-hs dh object i-f the s-tv-ihA 
is valid JSOov-matted 


car\ pass i\\t strMtr S w? 。 吣 c 

div-ct-tly *to JSOK pav-scO. 





Change your code to use JSON.parse(). 

The examples for Chapter 10 already include j son2 . j s in 
the scripts/ directory. Add a reference to this new script in 
inventory. html, and update your version of thumbnails . 
to use JSON . parse () instead of eval (). 


s 


Put vc-fcv-cndc *to jsor>Z- 
js bc-fovc 

*to 七 humbir^ils.js smtC 

tWmlcmaiU Stv'ip*t uses i\\t 
jsor\Z script 
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more challenges! 


There's Still lots to do. Can YOU help Joe out? 



How could you avoid showing the ID of an item when a user 
clicks on that item? 



What about those labels? Can you figure out a way to show 
better, more- readable labels? 



What about those URLs? Can you figure out a way to format 
URLs as links (using <a> elements) so they’re clickable? 



And besides all that, how do YOU think Rob’s inventory page 
could be improved? 

Don’t forget to use a JSON parser, instead of eval()! 


Can you make Rob's inventory page even cooler using JSON? 
Build your best version of Rob's page, and subinit your URL in the 
Head First Labs “Head First foruiti. Well be giving away 
cool prizes for lie best entries in tke coming mondiS. 





\/isi 七 us hcv-c, *tcll us dbou*t you\r cr\i\ry, 
3r\d jive us a URL -fco dhcdk ou*t v/ha*t 
you^vc dor\C (and hov/). 

Head First Labs from OTte^ly Inc, 


# 4^ http:"headflrsttabs.com/ 


Guides fro 


Heilly Me^a 


Head-First Labs 






jGI T Go£M]』e 




H^ad Fi rst Sneak Pr 


An introduction to AjaK with m exce 
whith yun'W fiml ih b p<iLjE. 


June Mawsletter 

We sent out our June Mewilelter reten 
newsletters vti 



Hud rirst Latas 

^rillf.rom 


h T^ps 


AfeiH 




AIlA J 


H&Dd Fires HTWL with CSS & KHTTML 


WSC 切 Hi lo 
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Dumb Quest! 


ons 


So I shouldn’t ever use eval()? 

eval () is an important part of 
JavaScript. If you need to pass textual data 
to another function for evaluation, or even 
between scripts, eval () is really helpful. 

However, eval () can be a problem when 
you're evaluating data that you can’t control, 
like from someone else's program or server. 
In those cases, you won’t know ahead of 
time exactly what you're evaluating. So in 
situations where you’re not in control of all 
the data, stick to a parser or some other 
approach other than eval (). 

But a JSON parser keeps my code 
safe, right? 

A JSON parser keeps your code safer 
than eval (), but that doesn't mean you 
can completely relax. When you're writing 
web code, security is always an issue. In 
the case of JSON data, JSON. parse () 
will ensure you've got valid JSON data, but 
you still don’t know what that data actually 
is. So you may still need additional checks 
before using the data in the rest of your 
scripts. 


We didn’t do any checks like that 
for Rob’s page. Should we? 

That’s a good question. When you're 
reworking the app to help out Joe, think 
about the data you're getting. Could it be 
used maliciously? Do you think you need 
additional security checks? 


What about that json2.js script? 
Can I trust and rely on that code? 


Now you’re thinking like a web 
programmer! Anytime you use code from 
another source, like from http : / /www. 
j son • org, you should thoroughly test out 
the code. We’ve done that testing here at 
Head First Labs, and j son2 . j s is safe 
to use. 


So what about XML versus JSON? 
Which is better? And who won the guitar? 

That’s another good question. You’ve 
seen a lot of JSON and XML code now... 
which do you like best? 


Security is ALWAYS 

a concern wlten 


you re prog[ramining[ 
for the wek 


Is it free, too? Do I have to pay 
anyone anything to use json2.js? 

j son2 . j s is free and open 
source. You can actually read through the 
source code at http : // www. j son. 
org/j son2 . j s, and see what it does 
for yourself. 


Always tkorougly 
test any cocte tkat 
you cfon’t kave 
complete control over. 
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time to choose 


So which is the better data format? 



Obvious to whom? I still think XML 
is the clear winner. It*s a standard, and I 
don't have to download any libraries to get 
things working. Besides, we already know the 
DOM. How great is that? 


Joe: I know about lots of things I don’t like. Brussel 
sprouts, Melrose Place, velcro shoes... just because I know 
about something, doesn’t mean I like it! 

Frank: I just don’t see what you really gain by using 
JSON. Maybe it’s a little easier for you to use, but it’s a 
pretty big pain when you get to dynamic data. 

Jim: I don’t know, Frank... I got really confused dealing 
with 2 DOMs at once. 

Frank: But XML is self-describing! We didn’t have any 
of those property-names-as-labels issues with XML. 

Joe: I still think JSON lets me think in JavaScript, not 
some other language. 


v)w: Corr^titVl 
dovm 。 灼 CS\/ 
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json 



rpen your pencil 


What do YOU think? Below are two columns: one for XML, and 
one for JSON. Under each heading, write why you think that 
format is better. See if you can come up with at least 5 good 
arguments for XML, and 5 more for JSON. 


ML 


JSON 
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xml vs. json 


Fireside Chats 



Tonight’s talk： XML and JSON go head-to-head on data 
formats and standardization 


XML: JSON: 

(glares at JSON) 

Your time has finally come, XML. Tonight, the 
world is gonna see that you’ve lost a step, especially 
when it comes to JavaScript and asynchronous 
applications. 

I’ve heard that one before... but here I am, still the 
reigning data format in the world. 

You’re only at the top because people think that 
there’s nothing else available. I know lots of people 
that can’t stand you, XML... you’re big and bloated, 
and a real pain to work with. 

I’m big because I can handle anything: product 
memorabilia, HTML, purchase orders... you throw 
it at me, I’ll take care of it. No problem. You think a 
little pipsqueak can handle all those different types 
of data? I don’t think so. 

Maybe not, but I’m fast... a lot faster than you, most 
of the time. 

I’m plenty fast, especially if you use my attributes. 

And I’m versatile... I can do all sorts of things, like 
represent a math equation or a book. 

Yeah, well, most of my users aren’t too interested in 
sending math equations across the network. Besides, 
all those angle brackets? Ugh... anyone that knows 
arrays can start working with me without having to 
learn all that weird XML syntax. 


But can someone transform you into something 
else? Like with XSLT? Or what about web services... 
you’re gonna tell me you can handle web services? 
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XML: JSON: 

Wow, you’ve really been a bit overused, haven’t 
you... you’re missing the point, Bracket-Head. I 
don’t care about all those things. I just care about 
getting information from a web page to a server and 
back, without a bunch of extra work... like having 
to crawl up and down a DOM tree. Know anyone 
who thinks that’s fun? 

Uh, yeah. Hello? We’ve got a whole group of DOM 
experts out there these days, writing killer user 
interfaces. Did you see that Fifteen Puzzle? That 
was pretty cool, and it was only about 100 lines of 
code. Anyone that knows the DOM is ready to use 
XML, to day \ 

Look, all developers really need is a lightweight data 
format that’s easy to work with in JavaScript. And 
that’s me, Big Boy, not you. 

What are all the servers going to think about this? 

You know, PHP and ASP.Net and Java... I don’t see 
them lining up to throw their support to you and 
your “lightweight data format” spiel. 

Well, I guess that’s true... but there are libraries that 
those guys can use to work with me. 

Libraries? If they’ve got to use a library, why not use 
a standard like the Document Object Model? 

I’m already standard in PHP 5. And who knows 
who’s going to adopt me next? 

But here I am, being used right now, because I’m 
already a standard. At the end of the day, you’re just 
one more proprietary data format. Maybe you’ve 
got a few more fans than comma-separated values, 
but I’ll put an end to that. 

Oh really? Let’s see about that... 
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exercise... solution? 



What do YOU think? Below are two columns: one for XML, and 
one for JSON. Under each heading, write why you think that 
format is better. See if you can come up with at least 5 good 
arguments for XML, and 5 more for JSON. 


雛 


jm 


ANSWERS 
OBSClIllFJ) 

INTENTIONALLY 
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11 ?orms and Valid^ition 




S:y what yoirmeant to say. 



Everyone makes mistakes from time to time. 

Give a human being a chance to talk (or type) for a few minutes, and they’ll 
probably make at least one or two mistakes. So how do your web apps 
respond to those mistakes? You’ve got to validate your users’ input and 
react when that input has problems. But who does what? What should your 
web page do? What should your JavaScript do? And what’s the role of the 
server in validation and data integrity? Turn the page to answer all of 
these questions, and a lot more... 


this is a new chapter 





marcy^ big-time 


Marcy's Yoga for Programmers... 
a booming new enterprise 

With her hip new site and super-fast response times, Marcy’s Yoga for 
Programmers site has exploded. She’s got some of Silicon Valley’s highest-end 
clientele signing up daily. She’s even added online enrollment, so once a potential 
client finds the perfect class, they can sign up right away: 


m n 


^ lo*b 

*,s sta^davd 

… Wst 一 

last v^awc, t^\\ 

date WtW 


Mav-ty also 
wa^-ts -feo khow 
how long -the 

die>vt has bee 灼 

yoga 
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forms and validation 


(^|j^rpen your pencil 


Below are a few entries from Marcy’s ever-growing customer 
database. There are some big problems... can you figure out 
what they are? 


firstname 

lastname 

email 

bday 

yrs 

bio I 

Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

Bob 

Brown 


August 300 

5 


Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

F0b#2938 





View my porn I 
for free!!!! 
192.72.90.234 

Jones 

Jane 

www.myjob.com 




Gerry 

MacGregor 

mac@myjob 

March 23 ， 

1972 

99 


Mary 


mw@myjob. 

com 



I’ve been doing I 
yoga for 12 
years | 

Bill 

Bainfield 

bb@myjob.com 

5-27-69 




2 

3 

4 

5 

6 

7 

8 
9 


Ho 、 


今 evry old Chough to have been prad*tid*mg| yoga -for ° 1°1 years. 


»3hy 


problems 匕 

you spo-t with 
this da-ta? 




10. 
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spammy data 


(^Sharpen your pencil 

Solution 


Below are a few entries from Marcy’s ever-growing customer 
database. How many problems were you able to spot? 


firstname 

lastname 

email 

bday 

yrs 

bio I 

Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

Bob 

Brown 


August 300 

5 


Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

F0b#2938 





View my porn I 
for free!!!! 
192.72.90.234 

Jones 

Jane 

www.myjob.com 




Gerry 

MacGregor 

mac@myjob 

March 23, 

1972 

99 


Mary 


mw@myjob. 

com 



I’ve been doing I 
yoga for 12 
years 

Bill 

Bainfield 

bb@myjob.com 

5-27-69 




1. .Smith is. register^, iwioe... 

2 . IfohRirovvn didH't.givc.his email, address . 

3. The.F.0b.?Z9^.ewtry. is.spam, »Qt.a. real, cliewf,. 

4. bm. Jones. Mer.ed.m. a.w.eb$.it.e.U.RU mim . 

5. frerry .Mac.^reg.Qr^. m?il. he probably. left off. ,o.qw. or .org,. 

6. fterry .MacGregor, c.ouldw.1 have Jbeew. practicing, yoga, for 99. years. 

7. Mary didwt enter, m a. last name,. 

8 . Everyone's, using .a differewt.fQrmat. for their, birthday . 

9. There's .iwformattaw missing. for. Jane. Jones,. Rob. Prow 成 and fill. Ifainfield . 

<10 ^ — p'ld you Cov^t 

u\> y/i*tK ar\Y 

oi\\Cr proble 眯 s? 
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our pencil_ 

Based on the data that Marcy's trying to gather, what sorts of things would you do to 
ensure she isn’t having the sorts of problems you saw on the last couple of pages? 

For each field below, write down what you think you need to check. 

First name . 


Last name 


■ 奇 pen y 


E-Mail 


Birtkctay 


Years oi Yoga 


Biogfrapliy 
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list the requirements 



Based on the data that Marcy’s trying to gather, what sorts of things 
would you do to ensure she isn’t having the sorts of problems you 
saw on the last couple of pages? 


First name 


Last name 



po y/C dllov/ mrbals? 

TKa*t v/c 

dllov/ \>cv-'»ods. 


This should be a required, field,. 

Names should only have letters,. 


This should be a required field. 
Names should only have letters. 



^ a ^z： n - 


E-Mail This should be a required field,. 

We also weed to make sure if $ formatted like aw e-mail, 


Birtkctay This should be a required field. 

This should be some sort of consistent format like. 

MM-PP-YY, or something similar. 

Years oi Yoga This should be a required field. 

This should be a number, and he less than tk years the. 

person bas been alive (calculated from their birthday),. 

Biogfrapliy This should be a required field,. 

Maybe we need a lewgth limit? 
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o 


0 


Ive decided not to require the years theyVe been 
practicing, their birthdate, or a bio. So if someone 
doesn't want to give that information, they can still sign 
up. But Ive definitely got to have a good first name, last 
name, and e-mail address. 



D 


tliereicir 

)umb 


e no o 

Questi9ns 


The owner of the page knows their 
requirements better than you do. 

No matter how good of a programmer you are, 
you’re not an expert in your customer’s business. So 
you probably won’t always make good assumptions 
about things like required fields, the types of data 
that can be entered, or the format of that data. 

It’s best to come up with some basic ideas about 
validation, and then confirm and expand those 
ideas by talking to whomever actually owns the site 
or business that the site represents. 


ywthe 饮 . 


Is this gonna be another one of those, “Not 
really Ajax” chapters? 

Yes and no. Well be spending most of the chapter 
working on validation, not asynchronous requests. But 
figuring out how to actually get accurate requirements 
and validating data for those requirements applies to all 
software development, not just Ajax apps. 


Tie customer defines 

not ^TogTaffimer- 

The best way to build a site 
your customer loves is to build 
the site the your customer actually 
wants. Don’t make assumptions about 
functionality... instead, ASK the customer 
how they want things to work. 
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validation everywhere 


Validation should work from the web page 
gACK to the server 

Validation is usually a multi-step process. Some things you can catch by using 
certain controls on your web page, like a select box instead of a text field. You 
can catch other things with your client-side JavaScript, like the format of an 
email field. And still other things might need to go to the server to get validated, 
like seeing if a username’s already taken. 

The most effective way to handle multi-layered validation like this is to always 
validate as much as you can on the web page. Then, move to JavaScript, and 
validate as much as you can there. Finally, involve the server. 


WeL page 


A web page can constrain data 
through specific controls, like 
length-limited text boxes and 
select boxes with only a few 
appropriate options. 


P。as as YOU Uv\ Kcv-c 

-to £.oy\s*tva'm data* 七 

cMtek tWy m Y ou，r 

JavaSoft 七 Y ou “竹 

vcs*tv-'»^*t toyrbrols. 



Constraints 



JavaScript 


Your client-side JavaScript 
can check data formats, 
ensure data’s entered 
into fields, and prevent 
submissions until a group of 
fields have data in them. 

TVy schd the scv-vcv- 

data that s hot -Pov-rha-ttcd 
匕 ovve^tly. Let the scv-vcv- 
wovvy about business logid, 
TO\rrwa-t-tihg. 


The server has access to the business 
data of your app. So it can check data 
consistency or perform other business 
logic that requires interaction with other 
data in the system. 

3 

Should W 加严 

data tovvett ay>a ⑽如七， 


TV^c 



Validity 




Consistency 
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— ^^rp€H your pencil 


Below is the XHTML for Marcy’s current version of the enrollment 
form. What changes would you make, based on the things you 
wrote down on page 412, along with Marcy’s comments? 


<htmi> 与 o ahead av\d youv- 

<head> d'Mrcdly oh the )(WTML. 

<title>Yoga for Programmers</title> 

<link rel="stylesheet" type= M text/css" href="css/yoga-enroll.css 
</head> 

<body> 

<div id="background"> 

<hl id="logo">Yoga for Programmers</hl> 

<div id= M content M > 

<h2>Enroll</h2> 

<form action="process-enrollment.php" method= n post"> 

<fieldsetxlabel for="firstname">First Name</label> 

〈input name="firstname" id="firstname" type= M text" /></fieldset> 

<fieldsetxlabel for="lastname M >Last Name</label> 

〈input name="lastname" id= M lastname" type="text n /></fieldset> 

<fieldsetxlabel for="email">Email</label> 

〈input name= n email" id="email" type="text" /></fieldset> 

<fieldsetxlabel for="birthday">Birthday</label> 

<input name 二 "birthday" id 二 "birthday" type 二 "text" /></fieldset> 

<fieldsetxlabel for="years M >Years of Experience</label> 

<input name="years" id="years" type="text" /></fieldset> 

<fieldsetxlabel for="bio">Biography</label> 

<textarea name= n bio" id= M bio"></textarea></fieldset> 

<fieldset class="nolabel"> 

<input type="submit" id= M enroll" value= M Enroll" / > 

</fieldset> 

</form> 

</div> 

</div> 

</body> 

</html> 
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consfra/r? your xhtml 



Your job was to add constraints to the data Marcy collects from 
her customers by changing her XHTML. What did you come up 
with? Here’s what we did. 


<html> 

<head> 

<title>Yoga for Programmers</title> 

<link rel="stylesheet" type= M text/css" href="css/yoga-enroll.css" / > 
</head> 

<body> 

<div id="background"> 

<hl id="logo">Yoga for Programmers</hl> 

<div id= M content M > 

<h2>Enroll</h2> 

<form action="process-enrollment.php" method="post n > 

<fieldsetxlabel for="firstname">First Name</label> 

〈input name="firstname" id="firstname" type= M text" /></fieldset> 
<fieldsetxlabel for="lastname M >Last Name</label> 

〈input name= n lastname" id= M lastname" type= M text" /></fieldset> 

<fieldsetxlabel for="email">Email</label> 

<input name= n email" id= n email" type= n text" /></fieldset> 

<fieldsetxlabel for = "birthday">Birthday</label> 丁 



<inpLiL iiaiu^="birLliday"~ 丄 d= n blrLhday n —trypu tcxtr 11 ~~ 怜 


<select name="month" id="month n > 


<option value="">--</option> 

〈option value="january M >January</option> 
<option value= M february M >February</optio] 
<! — ... etc... — > 

</select> 



values W Wthda7, 


I here . I > 

values U WtUa 7 , so 'ets 
y,oi use a ko%, 
allots bad 


<select name= n day n id= M day M > 
<option value="">- - </optior 
<option value="1 n >l</optior 
〈option value= n 2 n >2</optior 
<option value="3 n >3</optior 
<! — ... ©tc... — > 



⑽ us she d\d^i waht 
卜 so y/e d\d^i hC cd 


^ woinry about that 
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</select> 

</fieldset> 

<fieldsetxlabel for="years">Years of Experience</label> 

til iiaiL[d-"^ucii ~i ii- M ynnrr n t"__^ 

<select name= n years" id= M years n > 



<option value= M ">- - </option> 
<option>none</option> 

<option>less than l</option> 


<option>l - 2</option> 
<option>3 - 5</option> 


<option>more than 5</option> 


</select> 

</fieldset> 

<fieldsetxlabel for= "bio">Biography</label> 

<textarea name= M bio" id="bio M ></textareax/fieldset> 

<fieldset class= M nolabel M > 

〈input type="submit" id="enroll" value= M Enroll" disabled:"disabled” / > 


</fieldset> 
</form> 

</div> 

</div> 

</body> 

</html> 



sooy\. 
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a little more validation... 




Tesr DriVq 


See how many errors we can catch now... 

Download or type in signup . html, and make the changes from page 416 
and 417. Then load the page up in your browser. We’ve already knocked out a 
few of the problems Marcy was having: 


n 

Voqj Fip j Pitigrjmunc«& 



A | ■呌红 

^ "hiudnri[li!^c ■印 

您 _ 



Bilr-thday is how 
a o-f select 
boxes, ohC -fov~ 
3hd OhC 

day. 


\s also a sclc 6 *t 
W …狀 sowC 


The 4 <rrh be 

wUUcd away. 


418 Chapter 11 




























forms and validation 



Are you kidding? This isn’t even JavaScript... it’s just 
HTML. What gives? 

It can definitely be a little boring to dig into XHTML if you’d 
rather be writing JavaScript and asynchronous requests. Then again, 
your coding gets a lot easier if you’ve got a good web page doing its 
job. 

So I should use select boxes whenever possible? 

When it comes to data entry, that’s a good principle. The more 
invalid or poorly formatted data that comes to your JavaScript, the 
more work your JavaScript has to do. 

What’s the big deal with doing all of this in my JavaScript, 
and not messing with the XHTML web page? 

Impatient customers are the big deal. It’s often easy for you 
to code validation in your scripts, but customers don’t like error 
messages. If you can make sure they enter data by using good 
controls, customers are less likely to need error messages from your 
validation code. That makes for a happier user experience, and that’s 
always a good thing. 


Why did you disable the Enroll button in the HTML? 
Haven’t we usually been doing that in an initPage() function, and 
calling initPage() from window.onload? 

In earlier chapters, we’ve used initPage () to disable 
buttons, yes. You can certainly do the same thing here, or you can 
set the button to disabled in the XHTML. There’s not a big difference 
in either approach, really. 

One slight advantage to disabling the Enroll button in your XHTML, 
though, is that the XHTML now really does represent the initial state 
of the page. In other words, initPage () doesn’t change the 
form as soon as it loads. That makes the XHTML a more accurate 
represention of the form at load-time. Still, it’s not a big deal if you’d 
rather disable the button in an initPage () function. 


Notocty enjoys an error 
message tkat says, ” Uey ，you 
screweet tkat up. Try again •” 
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format or content? 


You caw validate the FORMAT of data, awd 
you can validate the CONTENT of data 


We’ve been using the term validation pretty loosely. At the user’s browser, we 
might make sure that the user enters their first name and birthday. That’s one 
form of validation. At the server, we might make sure that the user’s username 
isn’t already taken. That’s another form of validation. 

In the first case, you’re validating a data format. You might make sure that a 
username is at least six characters long, or that there’s a value for the first name 
field, or that an email address has an @ sign and a . com or • org in it. When 
you’re validating a data format, you’re usually working with client-side code. 



Validate the format of user data with JavaScript 

By using client-side code to validate data formats, 
you can let users know of problems quickly，without 
waiting on a server response. 


Well-ctesignect 
applications 
valictate totk tke 

FORMAT anJ 
tke COVTEVT 

oi user data. 


Sometimes you’ve got to do more than just see how many characters a string 
is, or make sure an entry is really a month of the year. You may need to check 
data against your database to prevent duplicate entries, or run a computation 
that involves other programs on your network. 

In those cases, you’re validating the content of user data. And that’s not 
something you can usually do at the client. You’ll need to send the data to 
your server, and let programs on the server check out the data for validity. 


Validate the content of user data on the server. 

You’ll need your app’s business logic to see if the 
content of user data is acceptable. Use server-side 
programs to let users know of problems with what 
they^e entered. 



You need 

BOTH types 

oi valictation to 
keep tact data 
out oi your apps 
anct datal>ases. 
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forms and validation 


Wc need to validate the FORMAT of the 
data from Marcy's ewrollmcwt page 

Let’s take another look at what we need to do to validate Marcy’s page. For each 
field, we’re actually just validating the format of the data. That means we should 
be able to do pretty much everything we need using JavaScript: 


tteves ouv v»st 

vaMaW — 辦〜 



TW«s a 
• ， - t's m a 

towbroW»a 

sclcdt Wes. 





First name This should he a required M4. 

Names should owly have letters. 


Last name This should be a required field. 

Names should only have letters, 

E-Mail This should be a required field, 
We al$o weed to make sure it's 
.... formatted like m ^ymil 


Birtkctay 



| J||y V.MWM ••▼，•-••• •，•，▼• . 


Years of Yoga fh b should bu.iA r.oquirod ftcWrr . 

This. shUUftrbe^Tliimlid.. 

Biograpky fhi» ahouldboft !tlold ; - 

Maybe we 腦 d a length limit? 



I^Vfc'vc go-t 
tiv-thday ih 

a ^Ohsisicy)i 
fo\rn\S^ by 

us '^3 XHTML 

select boxes. 


We can use JavaScript to validate the format of all of these 
fields, but what exactly mu\6 you do next? 


s^id we do^i 
heed to irc^ui^ a 

b, ^day, bio, i hc 

y^j^ c bj 

yog^j. 
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don’t repeat yourself 



Joe: Like checkFirstname () and checkLastname (), right?. 

Jim: Right. Then we just register each event handler to the right 
field, and boom, we’re good to go. 

Joe: Perfect. So let’s — 

Frank: Hang on a second, guys. I’m not sure that’s such a good 
idea. Aren’t we doing the same checks on several different fields? 

Jim: You mean like making sure a field has a non-empty value? 
Yeah, that’s … ummm... first name, last name, and email. 

Frank: Right. But aren’t we going to be repeating code in each one 
of those event handlers if we’re doing the same checks for different 
fields? 


So Ive been looking through these validation 
requirements, and I don’t think this should be 
too hard. We just need to build a bunch of event 
handlers, one for each field on the page. 




Joe: You know, he’s right. So maybe we need to have utility 
functions, like fieldlsFilled (), and we can call those 
from each event handler. So checkFirstname () and 
checkLastname () could just call f ieldlsFilled () to see if 
those fields are empty. 


Jim: Oh, that is better. So come one, let’s get — 

Frank: Wait a second. I still think we can do better. Why do we 
even need a checkFirstname () function? 


Jim: Well, duh, that’s got to call all the utility functions. 

Joe: Hey, hang on, I think I see what Frank’s getting at. What if we 
built the utilities to take in a field, and do their check? 

Jim: But you’d still need something to call all the checks for each 
field. Like I said, checkFirstname () ， or whatever... 

Joe ： But can’t you assign multiple handlers to a single field? 

Frank: That’s it! So you could just assign each validation function 
to the field it applies to. Like this... 
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gow't Repeat Yourself: PRY 


One of the core principles in software design is called DRY: don’t repeat 
yourself. In other words, if you write a piece of code once, in one place, 
try to avoid writing that piece of code again in some other place. 

When it comes to validation, that means we shouldn’t write code that 
checks to see if a field is empty in two (or more!) places. Let’s write one 
utility function, and then use that function over and over again: 


function fieldlsFilled() 
if (this.value == "") { 

// Display an error message 
} else { 

// No problems; we're good to go 


field. 



*to see "f ield 
V^as y\o value - 


...dnd "tliCh display dirt c\r\rov* 
o>r let -the usc\r 


Now you can assign this handler to several fields, for instance in an 
initPage () function: 

document • getElementByld (▼'firstname，，）. onblur = f ieldlsFilled,' 
document•getElementByld( n lastname n )•onblur = fieldlsFilled;^- 
document • getElementByld (▼ ， email，'）• onblur = f ieldlsFilled; 


Be—se -ficld/sp.llcdO \s^i 
tied "to a pavtifiulav 右 c ld, it 

Gh be used as a hahdlcv^ 4^ 

multiple -fields. 



Don’t 

ybur^ 


? 



If the same code exists 
in two places, it’s easy 
to change one bit of code and 
forget to change the other. By only 
writing code once, your app will be 
easier to maintain, as well as more 
modular. Don’t repeat yourself! 



ExettciSe 


There’s a pretty big problem with 
fieldlsFilled(). Can you figure out 
what it is, and fix it? 


5 

/ou might heed aho-thev- JavaS^HP-t 

problems with 

^•cldlsFilledO. 
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remember this? 


This looks good, Jim, but I think there might be 
problems down the line, especially when you start 
assigning multiple handlers like this to the same 
object on a page. 


O 


o 


Jim: What do you mean? I tried it out, everything works 
great. 

Frank: But you’re only assigning a single event handler 
to each field, right? 

Jim: Right. And we’ve got our utility function, 
addEventHandler (), ready for when we need to 
add more handlers. So I’m all ready to handle multiple 
browsers and that whole addEventListener/ 
attachEvent thing. 

Frank: But you’re using this in f ieldl sFilled ()... 

Jim: Sure. What’s the big... oh. Once we use 
addEventHandler() — 

Frank: — this stops working. That’s the problem. 




n fiSe 

BOLvixOH 


Did you find the problem in fieldlsFilled()? If you assign multiple handlers to a field, you’ll need 
to use addEventHandlerQ... and as soon as you use that function, the “this” keyword no longer 
works in your handlers. Here’s how we fixed the problem. 


-- --- 


function fieldlsFilled (e) { 

var me = getActivatedObject(e); 

if (me .value — "") { 

// Display an error message 
} else { 

//No problems; we're good to go 


Well yb eve 灼七 object wKcn ouv- ut’l’t/ 

addEvcr\*tttair\dlc'rO ) »s used. 

this ish "t ^liable wi-th multiple kdhdlm 
-to -the sa^e -field. 


^ Ths to&t Will re—re utils.js, y/WiA is 
▲me a^d 

addtvcir\*tttar\dilcv*0 doded- 
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Why do we need to use multiple 
event handlers again? 

Because we’re building a handler 
for each type of validation function, like 
checking to see if a field’s value is empty or 
if a value is in an email format. 

So for a single field, there might be several 
of those utility functions that should be 
assigned. For example, the firstname field 
shouldn’t be empty, but it also should only 
contain alphabetic characters. 

So since we’re using more than one 
event handler, we can’t use this? 

Indirectly, yes. Beceause we 
need multiple event handlers on 
some fields, we'll need to use the 
addEventHandler () utility method 
we wrote in utils . j s earlier. And 
since we’re using that approach to register 
handlers, we can’t use this in those 
handlers. 



Dumb Quest! 


ons 


Wouldn’t it be easier to use 
a shell function for each field, like 
checkFirstname(), and then call each 
individual validation function from that? 

Not really. Switching from this to 
getActivatedOb j ect () isn’t a 
big deal (especially if you’ve got a set of 
helper functions, like we do in utils . 
j s). Besides, we’d need even more 
functions. In addition to the validation 
functions, we’d need a wrapper for each 
field that just connected the field to all of its 
handlers. 

I don’t think I got that DRY thing. 
Can you explain that again? 

Sure. DRY stands for “Don’t Repeat 
Yourself ■” DRY is a pretty well-known 
software design principle. DRY just 
means that you want a single piece of 
code appearing in one single place. So if 
you're checking a field for an empty value, 
you should have that code in one place, 
and other pieces of code that need that 
functionality then call that single bit of code. 

If you follow DRY, you never have to change 
one piece of code in more than one place in 
your scripts. That means your code ends up 
being easier to change, maintain, and debug. 

You can check out Head First Object- 
Oriented Analysis and Design for a lot more 
on DRY and other design principles. 


And how does DRY fit into Marcy’s 
Yoga app? 

Well, each of our validation functions 
is a single bit of code, in a single function. 

If we put that code into individual handlers, 
we might have duplicate code. So 
checkFirstname () might have 
code that checks for an empty field, but 
checkLastname () might have the 
same code. If you found a better way to do 
that bit of functionality, you’d have to make a 
change in two places—and that violates DRY. 

So you never repeat code, no 
matter what? 

Every once in a while you’ll have to 
violate DRY, but it’s pretty rare. As a general 
rule, if you work really hard to follow DRY, 
you'll have better designed code. If you've 
tried but can't manage it, then don't worry 
too much. The point is to try your best to not 
repeat code, as that makes you design and 
write better code in the long run. 


Code tkat doesn’t 
repeat itseli is 
easier to ckange, 
maintain，and ctetug* 

Always tiy and 

write DRY code! 
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Ufs build some more event handlers 

fieldlsFilled () was pretty simple. Let’s go ahead and write code 
for the other event handlers we’ll need. We can build each just like 
fieldlsFilledO : using getActivatedObj ect () ， we can figure 
out the activated object, and then validate the format of the field. 


function fieldlsFilled(e) { 

var me = getActivatedObject(e); 
if (me. value == ’"，） { 

// Display an error message 
} else { 

// No problems; we're good to go 


function emaillsProper (e) { 

var me = getActivatedObject(e); 




This hahdlcir 6h^ks ah email ^ 

su 代 rts (ov- .ov-g, .gov, tit.) 


if 


A 


[\w\. - \+]+@[\w-]+(\•\w{2,4})+$/•test(me•value)) { 




This is -the v-egulav- cxpv-cssioh 


^|| Y/ovk ou*t codt 

d y>a ^ 七 av^-ba^Y 

PV-oWc-s m a httle Vor 

⑽ Y/, 从 W use 
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TW»s ^A\tr a Ud t> see ^ \i o^ly 

t^larns letters ： a-z., tasc-msc^ ， t»vc. 


function fieldlsLetters(e) { 

var me = getActivatedObject(e); 
var nonAlphaChars = / [ A a-zA-Z] 
if (nonAlphaChars.test(me.value)) 

// Display an error message 
} else { 

// No problems; we're good to go 




function fieldlsNumbers(e) { 

var me = getActivatedObject(e); 
var nonNumericChars = / [ A 0-9]/; 
if (nonNumericChars.test(me.value)) 
// Display an error message 
} else { 

// No problems; we're good to go 

} 


l 扣 0 ，: 咖 exp^ssioh. 
^ a\\ Baders 

that HOT b c W a 

, L V/ AioZ * So 3,1 ^ 

七 V^c value all Utbcvs’ 

-Picld|s/Vumbc\rsO chsuv-cs a -field has ohly 

hurncv-ifi. values ih i*ts v^lue- 

This c^pvcssioh jirabs all dhavadtevs 
NOT (us'mj ihc ^ symbol) m ihc 
r^urwbev-s O -thiroujli °{. 





； ^i|terpen your pencil 


Now that you’ve got event handlers, can you write initPageO 
for Marcy’s app? Create a new script and save it as enroll.js. Add 
the event handlers above and your version of initPageO. Then 
reference enroll.js and utils.js in Marcy’s XHTML. 

Try and load the enrollment page. Does it validate your entries? 
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avoid alertf) 


r r^arpen your pencil 

Solution 


Your job was to build an initPageO function for Marcy’s yoga page, 
and use the handlers on the last two pages to validate user entry. 


window.onload = initPage; 

function initPage() { 

addEventHandler(document 


Wlc yt -field- 


… we woiht -to validaie wheh 
use\rs move out o( the -field-. 


.. 如 d wc 


• getElementByld ( n f irstname ， ' ）， "blur" , fieldlsFilled) ; 
addEventHandler (document • getElementByld ( n firstname ， ' ）， "blur" ，- fieldlsLetters) ; 
addEventHandler (document • getElementByld (’ 'lastname ’，） ， ’ 'blur ，，， fieldlsFilled) ; 
addEventHandler(document•getElementByld( n lastname n ), n blur n , fieldlsLetters) 
addEventHandler(document•getElementByld("email n ), "blur ", fieldlsFilled) 
addEventHandler(document•getElementByld("email n ), "blur ", emaillsProper) 

Several -f ields V^avc multiple 
idlers ass'i^cd- 



o 


0 


You said to test these, but how? Right 
now, we just have comments for when 
there s a problem... should we put in 
alert() statements to let the user know 
when there s a problem? 


An alert() stops EVERYTHING— and 
users don’t like to stop. 

Using an alert () is pretty heavy-handed. That little 
popup brings everything on the page to a crashing halt. 
Earlier, we used some icons to let the user know what’s 
going on. But there was a problem with that approach, 
especially if you try and apply it to what we’re doing 
with Marcy’s page. 

Why doesn’t a simple approved or denied icon 
work for Marcy’s page? What would you do 
differently? 
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forms and validation 



Frank: Yeah. That seems a lot more user-friendly. 


Joe: But that won’t be so easy 


Frank: Right, you see it, don’t you? 


Jim: What? 


Joe: Well, we moved to generic handler functions. 
Those functions don’t know about which field 


they’re testing, so they won’t know what error 
message to display. 


Frank: Yeah. We need some way to have a set 
of error messages associated with each field. And 
then figure out a way to look up the right error 


I think we need to tell users what the problem 
is with their entries. There's a big difference 
between not entering anything into a field,and not 
using the right format, like for an email. A big red 
、 X 〃 doesn’t help much in figuring out whafs wrong. 


Jim: That makes sense. So for each error, we can 
just display a message related to that error. Like, 
“Please enter a first name” or “E-mails should be in 
the format name@domain.com”. 


message. 


Joe: What about the activated object? We’ve got that in our handlers, so what 
if we use the object to look up an error message? 


Jim: Hey, I’ve got an idea. Gan we just have some sort of name/value thing, 
where there’s a name of a field, and the value for that field is an error message? 


Frank: I like that... I think that would work. So we lookup the error based on 
the name of the field, which we’ve got from the activated object. 

Joe: But aren’t there multiple problems that can occur for each field? We need 
more than one error message per field. 


Frank: Hmmm. So we need a key for each field, and then a set of errors and 
corresponding messages for that. Right? 

Jim: How the heck do we do that in JavaScript? 


you are here ► 
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json’s back 


RETURN of SON of JavaScript 

In the last chapter, server-side programs usedJSON to represent complex 
object structures. But JSON isn’t just for the server-side! Anytime you 
need to represent name-to-value mappings, JSON is a great solution: 

TKis is i\\t variable 
-fov* 七仏 object 

( 、 itemDetails = { 

"id" : "itemShades ", 

"description" : "Yoko Ono's sunglasses. •••", 

"price" : 258.99, 

"urls" : ["http :// www.beatles.com/", 

"http : // www. j ohnlennon . com/ , 

"http : // www. yoko-ono . com/ ’▼] 

The value -fov iWPc*ta“s， 
u v-U is aw av-v-ay • 



The value -Poir i-tcmpctails. 
id is U i-tcmShadcs. W 


The value of a property caw be another 
JavaScript object 


You’ve already seen properties have string values, integer values, and 
array values. But a property can also have another object as its value, 
again represented in JSON: 


itemDetails = { 

"id" : "itemShades ", 

"description" : "Yoko Ono' s sunglasses. 

"price" : 258.99, 

’▼urls" : { 

"band-url" : "http : //www.beatles.com/", 
n singer-url n : "http :/ /www.johnlennon.com/ 
"owner-url" : n http://www.yoko-ono• com/’▼ 


TWis time, value i\\t 

u v-|s fV-OfCV-tY ,s 
JSOK-v-cfv-cscy\*tcd object 


Cuirly bva^cs si0 h al 
3 ho-thcv object value. 


You Cdiv\ jus-t 匕 k Oh W 
dot opev-a-feov -to 
get -to these nested values. 


itemDetails.urls.band-url 

itemDetails.urls.singer-url 
itemDetails.url^wner^ 
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JSON Magnets 

Can you use all the magnets below to build a set of mappings? 

You should have each field represented, and for each field, a set of 
mappings from a specific type of error to a message for that error. 


var 




f 





r 





r 
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exercise solution 



JSOV Magnet Solutions 

Can you use all the magnets below to build a set of mappings? 

You should have each field represented, and for each field, a set of 
mappings from a specific type of error to a message for that error. 



wav-hihAs is the variable 

\oy the ovcvall objed:. 


var 




a *top- 
Icvcl mapping 
-fov -field 
*tKa*t Kavc 
valida 七 icm o”. 




s a s ? c ^*»6 cvvov r^cssay 
U ^icld, \o>r tacM 
Y/avy\'m5 *fov -tV^a-t Wd. 


Please enter in your first name. 


Only letters are allowed in a first name. 


Only 


letters are allowed in a last name 




. n ^ form ' name @domain • com’ • 

Please enter your e-mail in the form _ 


TWs a 父 ― 


球: 


OY\ 
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forms and validation 


Lcfs warn Marcy's customers whew 
there's a problem with their entry 


With a warnings object full of useful messages, we can add warnings to 
Marcy’s page. Here’s what we’ve got in each event handler validation function: 


The field, via an activated object, that we need to validate. 

o A specific type of problem that occurred (for example, we know 
whether a field was empty or invalidly formatted). 

Based on that information, here’s what we need to do in our warning: 


o 

❺ 

❺ 


Figure out the parent node of the field that there’s a 
problem with. 

Create a new <p> and add it as a child of that field’s parent node. 

Look up the right warning, and add that warning as text to the new <p>, 
which will cause the browser to display the warning on the form.. 


Here’s a warn () function that handles this for Marcy’s form: 


function warn(field, warningType) { 
var parentNode = field.parentNode; 
var warning = eval('warnings.* + field.id + *. 1 
if (parentNode.getElementsByTagName("p").length 
var p = document.createElement("p"); 
field.parentNode.appendChild(p); 
var warningNode = document.createTextNode(warning); 
p.appendChild(warningNode); 

} else { 

var p = parentNode.getElementsByTagName("p")[0]; 
p.childNodes[0].nodeValue = warning; 


document • getElementByld ( n submit，，）• disabled = true; 


warningType) 


This evaluates the stv-m( 
"that -the -field 



TWis *»s -to see ^ 

i\strts alvcady a <?> 

6av\ add *tV^c to- 

^ a hCW <p> 
ahd y^odt with the 
浐吵七 WohrhihJ. 


TW»s "tUt ^ov …於 

alvcady a <p> *to 
add -to- 


l-f 七 hetre’s a pvoblcrw, make 
su\rc -the W E^\roir ， button 
乙扣’七 be disked. 
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use json for warnings 



E%eRct$e 


We’ve done a lot over the last few pages, and before you test everything out, there are several 
steps you need to make sure you’ve taken. Here’s what you need to do: 


Add the warnings variable from page 432 into your enroll.js script. You 
can put the variable anywhere outside of your functions, at the same 
“level” as your window.onload event handler assignment. 

Add the warnQ function from page 433 into enroll.js, as well. 


Update each of your validation functions, like fieldlsFilled() and 
fieldlsLetters(), to call warnQ when there’s a problem. You should pass 
the warnQ function the activated object, and a string, like “required” or 
“format." You can figure out which strings to use for the warning type by 
looking at the values in the warnings variable on page 432. 


tJiereicire no ^ 

Dumb Questions 


How does warn() know what field 
it’s adding a warning message to? 

Each validation function knows 
what field it's validating, because of 
getActivatedObject (). So 
when the handler function calls warn (), 
that function passes the activated object on 
to warn (). 

And what about the warning type? 
Where does that come from? 

The warning type is specific 
to the event handler function, 
f ieldlsFilled () would have a 
warning type of “required,” because that’s 
what that function is essentially checking for: 
to see if a required field has a value. 


Each handler should pass on a warning type 
that matches one of the pre-defined values 
from the warnings variable, like “required” or 
“letters” or “format.” 

What’s all that parentNode stuff? 

We want to add the warning just under 
the actual input box. If we get the parent 
of the input box (the field), then we can 
add another child of that same node with 
the warning. The result is that the warning 
message becomes a sibling of the input field 
itself... and displays right under the field. 

And the warning message is from 
the warnings variable? 

Exactly. We put that message in a 
<p>, as a child of the field’s parent node. 


What’s going on with that eval() 
line? That’s a little confusing to me... 

First, look at what’s being evaluated: 

'warnings.' + field + '.' 

+ warningType. That might come out 
to 'warnings.firstname.required' or warnings, 
email.format'. Each of those maps to an 
error message, which is what we want. 

So to evaluate the expression 
▼ warnings.firstname. 
required', we run eval () on that 
expression. The result is the matching error 
message, which we can then show on the 
enrollment form. 
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Tesr DriVq 


It’s time for more error counting. 

Make sure you’ve done everything on the checklist on page 434, and then 
reload Marcy’s enrollment page. Try out several "bad" combinations of data: 
skip entering a value for a few fields, enter in a bad email address, try numbers in 
the name fields. What happpens? 



n ^ rs 


Vugi igr Fpob 『 • 印 巾翩 * 


TW，s hvs 七 

v\uwbcv-s, 

o^Iy V^avc \tiitrs 


Thcvc s ho value -fo' 
"the las*t hdme -field 


TVis email addv-css 

isrrt an email，vbs a 

domd'm r\3w\C. 


V 1 i) hopjbijanrUbDckcJh/j 


PRDBRRnnERS 

(Dtf 9 


First Nam? 

» QnlviinliSrriieirr alfomr^Ai □ Anf 


Enro 


La-sc Hame 


Pira sr tt»! 




Efliai I *v«w^.£owSflor%tw 


Birthday 


TMre of EsiperioftCi? 


Diography 1 


Dcint 





How can we figure out when all fields are valid, and 
it’s safe to allow users to click "Enroll"? 
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eval() isn’t always bad 


Wait a second... we spent all that time last 
chapter talking about how dangerous eval() 
is. And now were using it again? Haven’t you 
been paying attention? 


O 


eval() is safe to use when you CONTROL 
the data you’re evaluating. 

In Chapter 10, we were evaluating data from a server- 
side program. We didn’t write that program, and 
weren’t even able to look at the source code. That 
makes that code unsafe to evaluate. We just weren’t 
sure that the code would be valid JSON, and would be 
safe to run on a user’s browser. 

But with the warnings variable, we created the code 
we’re evaluating. So there’s no danger. In fact, we can 
test things out, and if there is a problem, we just make 
a change to warnings. So it’s perfectly safe to run 
eval () on code you’re in control of. 
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If you dow't warwO, you have to imwarwO 


There’s one big problem with Marcy’s enrollment page: how do we get rid 
of those error messages when there’s not a problem? Here’s what our error 
handlers look like right now: 


function fieldlsFilled(e) { 

var me = getActivatedObject(e); 
if (me.value == "") { 

// Display an error message 

warn(me, "required"); ^ - 

} else { 


丁 he v/av *^0 -fuhdtio^ "takes c^rt 
o-f disf>ldy'm^ cv-\ro\rs oy \ "the -fov-m. 


// No problems; we're good to go 

1^ -tKcv-c s Y\oi a pvoblc 州 , v/e 
•to remove cv-v-ov- ^essays. 



IF there's a warning, get rid of it 

Let’s build an unwarn () function. The first part is pretty simple: for the field 
that’s passed in, we just need to see if there’s a warning. If so, we can get rid 
of the warning. If there’s not a warning, we don’t need to do anything: 



l/Vfc ohly heed to 
\TCrwovc a wavVmg i*f 
thcirc s at least ohe 
< P > with a y/d\rhih^ 
already m pla^c- 


function unwarn(field, warningType) { 

if (field.parentNode.getElementsByTagName("p").length > 0) 
var p = field.parentNode.getElementsByTagName("p")[0]; 
var currentwarning = p.childNodes[0].nodeValue; 

var warning = eval ( ' warnings . ' + field. id + * . * + warningType) ; ^ , 

yjv v/av^>v\<\ >mcv-c 

if (currentWarninq == warning) { //> . C ^ 

， ohly remove a wav-hihg 
•t -the wavhihgTypc 

passed ih -to uhwav-hO. 

|*f 七 lie types 

v-emove {\\t v / 丑 


field.parentNode.removeChild(p) 





ExeftciSe 


unwarnQ isn’t complete yet. The function still needs to figure out if the Enroll button should 
be enabled or disabled. Can you write code that figures out if there are any warnings being 
displayed? If so, Enroll should be disabled; otherwise, users can click Enroll to submit the form. 

'9X17 aBed uo si aBed juaiunojua 0i|j joj iiai 丄 HX 'jaijsajjej b paau noA j! :剛 
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E^eRciSe 

§OLytlOH 


unwarnQ isn’t complete yet. The function still need to figure out if the Enroll button should be 
enabled or disabled. Your job was to write code that figures out if there are any warnings being 
displayed? If so, Enroll should be disabled; otherwise, users can click Enroll to submit the form. 


function unwarn(field, warningType) { 

if (field.parentNode.getElementsByTagName( M p").length > 0) { 

var p = field.parentNode.getElementsByTagName( M p")[0]; 
var currentwarning = p.childNodes[0].nodeValue; 
var warning = eval('warnings.' + field.id + *.* + warningType) 
if (currentwarning == warning) { 

field.parentNode . removeChild (p) ; ^|| 


var fieldsets 


r airc 匕 hild 代 h 

°v,r^ sct> so 

all those <-Piddsct>s. 


document.getElementByld("content").getElementsByTagName("fieldset") 
for (var i=0; Kfieldsets. length; i++) { 

var fieldWarnings = fieldsets[i].getElementsByTagName( n p n ).length; 
if (fieldWarnings >0) { 

document.getElementByld("enroll").disabled = true 
return: 於 ~ 



4 tr 二二工 


document.getElementByld("enroll").disabled = false 


'P 


see ^ 

<o> tWild 

This is c^uivalc^-t "to seei^ i-f 
"theme av*c smdc 

is *m d <p>. 


I-P -thcv-c Bv\y 

-the -Pov-m is 

okay … enable E^v-oll. 
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Tqst DriVQ 


Turn warnings on AND off. 

Time to take the enrollment form for another test drive. In each of your 
validation handlers, add a line that calls unwarn (me) ; if there’s not a 
validation problem. Looking pretty good, right? 


tv"Vo\rs slioy/ "bV'C 

data’s mvalid … 


* ^ whch -the 

把 CoYYtdtd. 



丁 he Eh\roll 
but-toh is 
Ch^blcd how 
"tha 七 all 七 he 
dais's valid. 
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validation is critical! 



Are you kidding me? All this for a little 
validation on the client-side? This is a little 
ridiculous, isn’t it? Besides, where the heck is 
the Ajax? 


Validation is hard, thankless work... and 
EVERY application needs validation. 

Getting data right on a form is often boring, and takes 
a long time to get right. But, validation is incredibly 
important to most customers. Take Marcy: without 
good data, she can’t enroll people in classes, she can’t 
send out mailings, and she can’t get new business. 

Multiply that by all the web apps that you’re getting 
paid to develop, and validation becomes critical. 

And while Marcy’s enrollment form isn’t making 
asynchronous requests, it’s still a web application that’s 
typical of the things you’ll have to work on as a web 
developer. Not many programmers can make a living 
only working on asynchronous requests. 


So take the time to get validation on your pages right. 
Your customers will love you and their businesses will 
flourish... and that means more work, better paychecks, 
and less middle-of-the-night, “It’s broken!” calls. 


Every application 
needs valictation! 


440 


Chapter 11 





forms and validation 



rpen your pencil 


Below is Marcy’s database and the problems we found way back 
on page 410. Next to each problem, make a note about whether 
your changes to the enrollment form have fixed that problem yet. 


firstname 

lastname 

email 

bday 

yrs 

bio I 

Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

Bob 

Brown 


August 300 

5 


Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst 

F0b#2938 





View my porn I 
for free!!!! 
192.72.90.234 

Jones 

Jane 

www.myjob.com 




Gerry 

MacGregor 

mac@myjob 

March 23, 

1972 

99 


Mary 


mw@myjob. 

com 



I’ve been doing I 
yoga for 12 
years 

Bill 

Bainfield 

bb@myjob.com 

5-27-69 




1. Sy.s^w.Smith, is. registered, iwm . 

2. (foh.Rrovvn didn't.gh/e.his email. addrEss. 

3. Ihe.F.0b.?Z9$.8.eiitrY. i$.spm wota. real. oJiewf,. 

4. bm. Jowe$. Mer.ed.m. a. website.URU mim . 

5. frerry .M^regor^. 爛 ^ij.i$w:t.v 遇 lii.,.he proh^bly.left off. ,p.qw. Qr.,org.. . . .. 

6. frerry .MacGregor, c.ouldw.1 Jbava hzm. practicing, yoga. for. 99. years. 

7. Mary didn't enter, m . 

8. Everyone's, using.a different.format, for their, birthday. 

9. There's wformatiQH missi wg. for. Ja we. Jo wes,. Rob. Sroww, awd Ml. Kaiwfleld. 
10 .. 
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lots of improvement 



We’ve added a lot of validation... but what problems have we 
really solved? Your job was to figure out what problems our 
validation is preventing. 


firstname 

lastname 

email 

bday 

yrs 

bio I 

Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst | 

Bob 

Brown 


August 300 

5 


Susan 

Smith 

ss@myjob.com 

1 January 

0 

I’m a systems I 
analyst | 

F0b#2938 





View my porn 
for free!!!! 
192.72.90.234 

Jones 

Jane 

www.myjob. 

com 




Gerry 

MacGregor 

mac@myjob 

March 23 ， 

1972 

99 


Mary 


mw@myjob. 

com 



I’ve been I 

doing yoga for 
12 years 

Bill 

Bainfield 

bb@myjob.com 

5-27-69 




Wc do /七 Kavc 
*to Kdy>dlc "this yet 

1. Sv._.Swith .is reflisterei iwioe,.f ! c ! ds . 

_ _hahdled how. 

2. Ifoh.Rrowm jdidwMgivehi& email, address...v.. 

^ -- Ouv -rovrwa't'tmg 

3. The F0b # Z938 entry is spam, wot a real client. -fov 

4. hm. Jone$. entered, m a.website URU mtm .. 严厂 es 扣 d f ils 

d^\ take tav-c o\ this. 

5. 分 enry M 汹扣 eg.Qr:& mm\. i$w:t.v.alW"..he prohahly.left off., o.qw. o.r.,or.g........ 

6 - 分叫 _卿 議她寧〜卿 L 

7. Mary didw.t enterm a.last.name,. 5. .^Ka^cs -to -tKc pay 

8. Everyone's, usiwg.a different.format, for.their, birthday.... kcc f ^ csc &°你 

9. There's .iwfor.mati.Qifi. mmim • for. Jawe. Jowes,.Rob. Proww, mi Ml. Ifamfield. 

10 . .upd^ed 

: 
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forms and validation 


duplicate data is a SERVER problem 

The only problem we’ve got left is when someone enters in their 
information twice, like Susan Smith on the last page. But it’s going to 
take a server-side program to handle that sort of problem... the server 
would need to take an entry, and compare it with existing entries in 
Marcy’s customer database. 


Web Page 


Web Server 


Database 



Ouv vaMa*b 。 朽 

V^dlcs fovwatt • 呼 . 



• but _七 takes -the scv-vcv--a^d 
its acuss -to Marcys database- 
■fco data 



T\)t or\ly way -to c^suv-c 
data toY\s\situ^ is -to cMtck 
如 errbries bcW 


You could do this with aw asynchronous request... 


dddi'm^ a 於 cv/ cmc. 


Suppose we build a server-side program to take a user’s information, 
and check Marcy’s customer database to see if that user already existed. 
We could request that program using an asynchronous request in our 
JavaScript. Then, once the server returned a response, we could let the 
user know that their data’s been accepted. 

...but whafs the benefit? 

The only problem is that there’s nothinig for the user to do while they’re 
waiting. We’re probably using at least their first name, last name, and 
email to check against the database, so at most, a user could keep 
entering in their birthdate and bio. But even those aren’t required fields... 

It’s really better to let the server check the user’s information when the 
user tries to enroll, and issue an error then. Since duplicate users aren’t 
a huge problem right now, you’re better off saving a ton of extra code, 
and simply letting the server handle reporting a problem to the user. 


Sometimes, it’s test 
to let tke server 
kandle problems 
synckronously. 

Not every wet app 
needs asynckronous 
requests and responses! 
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another satisfied customer 


So weVe done wow, right? 

That’s right. We’ve handled all of Marcy’s validation problems, and she’s 
going to have her server-side guys take a look at preventing duplicate 
data. In fact, let’s see how Marcy likes her new enrollment page... 


Wow, this is fantastic. Ive been 
getting twice as many signups every week 
since going online, and I*m not getting 
any weird data problems. Care to sign up 
yourself? 



Ahothcm web 
s Wy -to add 


O 


o 


y 财 pomit-Polio. 


su^^css 
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12 post requests 






Paranoia: Ws your friend 



Someone’s watching you. Right now. Seriously. 

Freedom of Information Act? Isn’t that called the Internet? These days, 
anything a user types into a form or clicks on a web page is subject to 
inspection. Whether it’s a network admin, a software company trying 
to learn about your trends, or a malicious hacker or spammer, your 
information isn’t safe unless you make it safe. When it comes to web 
pages, you’ve got to protect your users’ data when they click Submit. 


this is a new chapter 
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spam... again! 


There's a villain in the movies 

Just when we thought that we’d solved all of the web world’s problems, it 
looks like one of our earlier customers is back... and he’s not happy. 




r 

㈣ 如 at 


IVe got issues. I'm starting to get 
customer complaints... they re all getting 
spammed, and they think \Ys because they 
registered for my movie review site. This is your 
code... you better fix it! 


Your code... your problem! 

Mike, of Mike’s Movies fame, has another problem. 
It doesn’t seem like his customers getting spammed 
is really related to the registration form we built for 
Mike, but since we built that form, he’s blaming us. 
Welcome to web development. 

So what do you think is going on? Is it possible 
that spammers are getting Mike’s customer email 
addresses because of something we did — or didn’t 
do — on the enrollment form? 
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post requests 



rpen your pencil 


What’s going on with Mike’s registration page? Do we have 
anything to do with his customers getting spammed? 


Below is Mike’s page and server. Your job is to draw all the 
interactions between them. Be sure to include what's passing 
between the web page and the server. 


po^-b wov-vy about sfcti-fits 
J uscv"- Jus 七 wvrte 

-f ields ar^a data is sent 

ba 乙 k and 



Do you think we have anything to do with the problems that 
Mike’s customers are complaining about? 
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exposed addresses 



Your job was to draw all the interactions between Mike’s page 
and server. Be sure to include what’s passing between the web 
page and the server. Here’s what we came up with. 


f-ov uscvv^awcs, v/C ^ ■ 

uscv^amc, a^a kadk 0^7■ usemame^jjehkihs 

▲ o 州如 


ov 





WcVc aW 从 c 

二 


the scv-vcv- sends ba^k 
^ ^ttTAIL -Pva^rwc^'t v/i*th d 

do^-f i\rrwatioir> message and some I'mks. 


Do you think we have anything to do with the problems that 
Mike’s customers are complaining about? 

Maybe! We're sending the user's email across 
the network,is that safe? Caw someone get 
that email awd spam that user? 


XHTML 


Web server 


‘mm …广 


t M\Vts \>voWc^ !i 

todt^ fa 认 1 七 . 


ouv 
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post requests 


ftET requests send request parameters across 
the network as clear text 


We’re using a GET request to send all of a user’s information to the server: 

/ ^gis-tcirUscvO sehds a 

- --usev* s ih-foirma-tioh usihA dh 

function registerUser () { asy h ^hv-ohous vc^ucs^. 

t = setlnterval (▼，scrolllmages () n , 50); 

document • getElementByld ( "register n ) . value = "Processing 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert("Unable to create request .")； 

} else { 

var url = "register.php?username= M + 

escape(document.getElementByld("username").value) + "&password= M + 
other request parameters ...; 

registerRequest.onreadystatechange = registrationProcessed; 
registerRequest.open( "GET" , 
registerRequest.send(null); 


Clear text is text... iw the clear! 

When parameters are sent using a GET request, those parameters are just text 
moving across the network. And that text is sent in the clear. In other words, 
anyone listening to your network can pick up that text. 


url, true) 


rteves -bell 七 ^ 

yrcfst #6 七仫， a 咏 I 



userhame-jjehkihs 
password^iheartalba 
email-ij^mac.com 
(other request params) 


n ： S 十二十 咖 g 出 

jWpU 0 | d ^ ^ 

pa 9 e , h d the sJveJ. 

匕扣 \rcad -this -tex-t. 一 1 一 
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post sensitive data 


POST requests £0NJ send clear text 

What we need is a way to send that same data, but to avoid the data 
going across the network as clear text. That way, people can’t snoop 
around and find Mike’s customers’ email addresses. That should take 
care of his spam problem once and for all. 

Fortunately, that’s just what POST requests do. They send their request 
data in a different way than GET does. Let’s take a look: 

requests send data m the request URL 

GET requests send data to the server as part of the request URL, 
using request parameters that are part of the actual URL. 


register.php? Yes, I'd like to sign up for 
reviews. My name is John Jenkins, my 
email address is jj@mac.com, and I love 
action flicks. My favorite is Casino Royale. 


o 




Ahyohe wi-th a dhedp 
hC+y/oirk Uyy gc-t 

this ih-Poirma-tioh -Pv-om a 


register.php?username=jjenkins&password 

-iheartalba&firstname=John&lastname=Jen 

kins&email=jj@mac.com&genre=action 




卜 a 味 T data i 

七 sevvev is s ⑼七 as part 

o-f \rc<\ucs*t WRU 


ov- 


This URL 
?^iiy lohj... 


By\ d^*tudl v-c^ucst lo*ts sf>e^idl dhav-a^*tcv-s 

m -this URL would be eroded by JavaS^\rip*t 
csdapcO iVc’v/c i*t vY\tr\toAtA) *fco 

r^akc i*t a little casicv- *bo u^dev-s-ta^d. 


TKc scv-vcv-s'»dc script 

v-cads i\\t da-ta -from i\\t 
pav-amc-bcv-s a^d 
adds £.us*tomcv *to 
/\Z|»ke’s tus*bow\cv- da 七 abase 
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post requests 


POST requests send data separate from the request URL 

In a POST request, data that has to be sent to the server is kept separate 
from the URL. So there’s no lengthy URL with data in it, and no clear text 
customer data is sent over the network. 


O 



register.php? I have the 
customers name, email, and 
movie preferences. I’m sending 
them over via POST, OK? 



register, php 


d3i, 7 ^ 

sbM 


The se\rve\r-sidc 

^dds ihc 

^us-tomevs daia -to 

繼 e 、 debase. 




TV^c sevvev y*ts ^ 
VC^VACst 

[AYitTkCodt^ 

POST data- 
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servers unencode post data 


The data iw a POST request is 
ENCOgEE until it reaches the server 

Once a web server gets a POST request, it figures out what type of data it has received, 
and then passes that information on to the program in the request URL. 



this is a POST \rc^ucs-t ; theve’s 

ho data ih -the a^-tual v-c<\ucst URL. 


TV^c sewev- OfCV^S 

u? POST 
ve'ucst 
AtCodts 
vc<\ucst d3*t3- 

(or Mikes 
movie is *tKc 
dustomCV-^s m-fov-matioia 
d^d *tKc*iv movie 
pv-c*fcvci^dcs. 



register.php 





Web server 


T h x C ih e 

3 , 卢 0 州 "the mc^ucsi 
^ \i iht> 

a se ⑽一 side 
use. 


username=j jenkins 

pas sword^iheartalba 

firstname=John 
lastname=Jenkins 
email=j j @mac.com 

genre=action 
favorite=Casino Royale 
tastes=Action, action, action 


TV^C server tmalb/ 

passes \}\t data ot\ xo 

vc<\ucstcd m tV^c WRU. 





register.php 
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post requests 



Dumb Questi 


9ns 


So POST requests are more secure than GET requests? 

Yes. There's one additional step that goes into packaging up 
POST data: the data is encoded in the browser and decoded on 
the server. Still, decrypting POST data isn’t foolproof. Determined 
hackers can unencode your POST data, although it takes a lot more 
work than grabbing request parameters from the URL of a GET 
request. 

If you really want to secure your request, you’ll have to use a secure 
network connection, like SSL But that’s a little beyond what we’re 
covering in this book. 

So if POST is still insecure, how will that help Mike’s 
customers? 

Most spammers are looking for the easiest targets possible. 
Most of the time, a single bit of trouble—like unencoding POST 
data—is all it takes to send spammers and hackers looking for an 
easier target. With Mike’s site, moving to POST takes a little bit of 
effort, but will probably protect his site from the majority of malicious 
attacks. 

A little tit ol security on 
tke Internet goes a long way* 

Encoding ^our request data 
will cause most kackers to 
look lor an easier target 

somewkere OTHER tkan on 


So are you saying that POST is safe and GET is unsafe? 

Not really. “Safe” and “unsafe” are pretty relative terms, and 
it’s impossible to predict all the ways something can go wrong. But 
sending data to the server using POST takes an extra step to protect 
that data. Sometimes that one step is the difference between your 
users getting your monthly newsletter, and those same users getting 
a spammer’s porn mail. 

So why not send every request using POST? 

There’s really no need to. For one thing, encoding and 
unencoding data takes a bit of processing time. Besides that, GET 
is fine for sending shorter, non-private data. Also, if you use POST 
for everything, your users won’t benefit from tools like Google 
Accelerator, and some search engine spiders might not pick up your 
links. 


And to send a POST request, all we have to do is put the 
request data in the send() method instead of the URL? 

Exactly. You send the data in exactly the same format. You can 
pass name/value pairs to the request object’s send () method, 
almost exactly like you did when you were sending a GET request. 


That’s it 


? There’s nothing else to do? 


Well, let’s try it out on Mike’s page and see what happens... 


your wet site. 
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send() post data 


sendH your request data m a POST request 

In a GET request, all the request data is sent as part of the request URL. So you build 
long URLs, like register . php?username=j j enkins&password=... 

But since request data isn’t sent as part of the URL for a POST request, you can put 
all the data directly into the send () method of yor request object: 


Processing. 



Instead 
add— 
data -to 
ve'ues 七 WRL-) 
let’s stove 
•m a 士 r— 
vaviaWc. 




崎 .No ，迕 ? a ， a^s. 


function registerUser () { 

t = setlnterval (▼，scrolllmages () n , 50); 
document.getElementByld("register").value 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert("Unable to create request.") 

} else { 

var url = "register.php 
var requestData — 

escape(document.getElementByld("username").value) 
escape(document.getElementByld("passwordl").value) 
escape(document.getElementByld( n firstname") .value) 
escape(document.getElementByld("lastname").value) 
escape(document•getElementByld("email")•value) + " 
escape(document•getElementByld( n genre n ).value) + 
escape(document.getElementByld("favorite").value) 
escape(document.getElementByld("tastes").value); 


x/ou 70 V 

data a 七十 
(?) m a POST 呼 st. 


username: 


▼▼ &password= 

^ & irstname 
f "&lastname 

+ 

"&genre=" 

"&favorite 
+ 'j^astes 



Use sawc 

awfcv-say\d 
c.V^av-at*tcv- 
{p sc^av-a*tc 
pav-awcWs- 


registerRequest.onreadystatechange 二 registrationProcessed; 
registerRequest. open ( "POST" ，- url, true); 
registerRequest.send(requestData); 


The da-ta is as a 

passed -fco the sc^dO 

method o( -the V*c<\ucsi object 


TW«S *«S a 


POST 


thereiare no o 

Dumb Questions 


Why don’t I need a question mark? 


The question mark (?) separated a server-side program name, 
like register.php, from the request data name/value pairs. Since 
you're not appending the request data to the program name, you 
don’t need that question mark anymore. 


But I still do need an ampersand? 

Yes. The ampersand (&) separates different pieces of data. 
That tells the server where one name/value pair ends, and where the 
next one starts. 
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post requests 


Tqst Drivq - 

Secure Mike’s app with a POST request. 

Change your version of registerUser () in validation . j s to match the version on 
page 454. Then reload Mike’s registration page, and enter in some data. Try and submit the 
registration... does everything work like it should? 



looks oka 丫 ： WUo: 

scv*vcv"? - 





Would any of the other requests on the registration 
page be good candidates for POST requests? 
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test, test, test 


Always check to make sure your request 
data was RECEIVER. 

It seems like we’re sending a valid POST request, and we know that the 
request data’s right from when we built Mike’s registration page using GET. 
But we really don’t know for sure that our request is getting handled. 

In cases like this, where you don’t get direct feedback from a server, you 
need to check that your request data got sent to the server and was 
properly received. Otherwise, you could find out there’s a problem much 
later. And problems like that are hard to debug... who remembers the code 
they wrote three months ago, anyway? 



Why dont I jsut ask the guys to add a 
few lines to register.php? Ifs probably 
a good idea to let Mikes new customer 
know what they submitted, anyway. 


Good server-side programs 
CONFIRM the data you sent. 

The server-side programs that verified usernames 
and passwords gave you direct feedback. That 
made it easy to confirm that your request data 
was received. In fact, most server-side programs 
respond to your request data and give you some 
sort of feedback. 

But a few programs — like Mike’s server-side 
registration page — don’t let you know what data 
they’ve received. Work with the programmers 
writing those programs. Often, it’s easy to add a 
few lines and at least echo back what request data 
was received. Then, you can ensure the data you 
sent is the data that those programs received. 


TVis IS v)ill … si^cs be ⑼ 

% ⑽七 如 •七 “ Mike’s 
scv'vcv'— side lately* 
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post requests 




Tesr Drivq (伽 


Let’s see what the SERVER says. 


If you haven’t already，download the example files for Chapter 12 from Head First Labs. There’s 
an updated version of register . php called register-feedback. php that gives you 
some visual feedback when a new user submits their registration data. 

Update the request URL in registerUser () ， in validation . j s, to use this new script. 
Then, try Mike’s registration page again. 



this, docWt look 铋。 
good. Thc\rc s ho uscirhamc, 

add 代 ss … 


n no 




V■ * il tin^i' jdrirsr.i ak/ch L^/inrg!iTT|i 




h\M\ 


L»ne 
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the server’s the problem 


Why didn't the POST request work? 



Ifs got to be the register.php 
script. We did everything right on our 
end, so ifs got to be a server problem. 


I don’t think so... those server-side 
guys say nothings wrong with their end. 



Jim: Are you sure? I’ll bet someone forgot to change the 
script to accept POST parameters. Gome on, that’s got to 
be it! Fix the thing, and we can get on with it... 

Jill: No, I asked him about that specifically. The script 
accepts GET and POST parameters. Are you sure you 
sent the customer’s details over? 

Jim: I’m positive. registerUser () uses a POST 
request, and I know the request object works from when I 
was still using GET. 

Jill: Well, you must have made a mistake somewhere. 

Jim: No way. All the data’s in the send () method of 
my request object... I even double-checked. So I know the 
data’s getting to the web server. 

Jill: Well, ifs not getting to the script. Look at the 
output page! There’s nothing for username, firstname, or 
lastname, or anything. 



This is Jill- sKcs 

ou*b M»kc s 
scv-vcv--s'idc 5 u Y s 1 3 七々 . 


Jim: Wait a second. If I’m sending the data to the server 
correctly... 


Jill: .and the script’s asking the server for the data and 
getting nothing... 


Together: The problem must be the server! 
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post requests 


The server imewcodes POST data 

Our script is sending a request to the server with the right request 
data. But somehow，the server’s not getting that data to the server- 
side program, register-feedback. php. So what’s going on 
between the server and register-feedback. php? 

We know the server is supposed to take our POST data and 
unencode it. But the server has to know how to unencode that 
data... and that means knowing what type of data it’s receiving. 



The scirvcir has ho idea 
wha-t type daia is i h 
■this POST \rc<\uesi... is i-fc 
ah ‘age? Text? X 亂？ 





, r 

Smdc 如 server docs^-t 

诎 at kmd J data V^as, rt 

does^t ^ ?ass iV,at 

• 加 W 。 呤匕二 f 




register-feedback.php 
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what are you sending? 


Wc need to TEll the server what we're sending 

We need to let the server know exactly what type of data we’re sending it. But that 
information can’t be part of the request data itself, so we need another way to tell the 
server. 

Anytime you need to talk to the server about a request, you use a request header. A 
request header is information that’s sent along with the request and the server can read 
right away. The server can also send back response headers, which are pieces of 
information about that server’s response: 


Servers get information from the browser via 
REQUEST REAPERS. 



Request Method: POST 
Request URI ： /register.php 
Request Version: HTTP/1.1 

Host: www.headfirstlabs.com 

Keep-Alive: 300 
Connection: keep-alive 

C appnclJon^x-www-form-urlencoded 

Content-Length: 121 ^ 


s how -the scvvcf 
sees ouir 


TcTccc.- 

a 代七 head 饮， 4a 七切 ? c 
da*ta v/cVc sWm} 





Web server 


Servers send information to the T 

browser using RESPONSE HEAPIRS. 
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post requests 




OK, I get it. In a GET request, the data 
is part of the request URL, so it has to be 
just text. But in a POST request, we have to 
explicitly tell the server what to expect. 



You need to set the CONTENT-TYPE 
request header for your data. 

You can send a lot more than plain text in a POST 
request. When a server receives your POST request, 
it won’t know what kind of data it’s dealing with 
unless you tell the server what to expect. 

Once the server knows what kind of data you’re 
sending, it can decode the POST data and handle 
it properly. For Mike’s registration page, we need 
to tell the server we’re sending it name/value pairs. 
We can do this by setting a request header called 
Content-Type. 



register.php? I 
have the customers name, 
email, and movie preferences. I*m 
sending them over as name/value 
pairs via POST, OK? 


register.php 






Vw# a t 士七切 ? / 



you are here ► 


461 

















request headers 


Set a request header using setRcquestHcadcrO 
ow your request object 

Once you know what request header to set, it’s easy to do. Just call 
setRequestHeader () on your request object, and pass in the name of the 
request header and the value for that header. 

For name/value pairs, we want to set the Content-Type request header. 

We need to set the value of that header as application/ x-www-f orm- 
urlencoded. That’s a bit of a strange string, but it just tells the server we’re 
sending it name/value pairs, like a web form would send: 


function registerUser() { 

t = setlnterval (▼▼ scrolllmages ( )，'， 50); 

document • getElementByld ( "register，'）. value = "Processing 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert("Unable to create request."); 

} else { 

var url = "register. php" ; 


var requestData = M username= M + 

escape (document • getElementByld (’'username ， ' ） .value) + 
escape (document • getElementByld ( ，， passwordl ’ ， ） .value) + 
escape (document • getElementByld ( ， 'firstname" ) .value) + 
escape (document • getElementByld ( n lastname ， ' ） .value) + 
escape (document • getElementByld ('’email'，）• value) + "" 
escape (document • getElementByld ( "genre ，，） .value) + 
escape(document.getElementByld("favorite").value) 
escape(document.getElementByld("tastes").value); 
registerRequest.onreadystatechange = registrationProcessed; 
registerRequest.open("POST" f url, true); 
registerRequest.setRequestHeader("Content-Type 
"application/x-www-form-urlencoded M ); 
registerRequest.send(requestData); 


&password= M - 
M &firstname=' 
"&lastname=" 
+ "&email=" + 
&genre=" + 

&favorite=" + 

+ "&tastes= M + 


This ihe Co^i 



二扣 d -tells scvvc\r -to 
name/value pairs, like a ^t\) w 
y/ould seytd m d submission. 
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post requests 


there^ave no ^ 

Dumb Questi9ns 


So a request header is sent to the server along with the 
request? 


So “Content-Type” is used to tell the server what kind of 
POST data we’re sending? 


Yes. All request headers are part of the request. In fact, the 
browser sets some request headers automatically, so you're really 
just adding a request header to the existing ones. 

Have we been getting response headers all along, too? 

Yup. The browser and server always generate headers. You 
only have to worry about them if there’s information you need to 
work with, like setting the content type or retrieving a status from a 
response header. 


Exactly. In this case, we're using name/value pairs, and the 
content type for that is “application/x-www-form-urlencoded.” That 
particular type tells the server to look for values like those it would 
get from a normal form submission. 

Are there other content types? 

Tons. To find out about the rest of them, try searching for “HTTP 
Content-Type" in your favorite search engine. 



Suppose you wanted to send XML data to a 
server-side program. What do you think you’d 
need to do in order for the web server to 
unencode that data properly? 
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test drive 


Tost Drivq (ana maRQ rims) 

Did it work? Did it work? 

Update your request to include a Content-Type request header, and try Mike’s registration 
page again. Submit your information, and see what the server says. 




Read Reviews 




V M I W QVH5 






L»nt 


The scv-vcv- 
uhCh^odcd ouv 

daia dhd 

Passed i-t oh -to the 
Sdrvcv--sidc p^rogn 




MWi 
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post requests 


Nice work! You knocked 
that out in no time. Is there 
anything else you need to fix 
while you're here? 


0 




POST secure data. 

What other secure data does Mike pass 
between his registration page and the server? 
Should the username request be POST? 
What about the password request? 

It’s up to you to figure out which requests 
are best sent as POSTs, and which ones are 
fine as GET requests. Go ahead and update 
Mike’s page to make it safer. When you’re 
done, flip the page for a few more exercises. 
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word search 



XARSYROTADNAM 
ACLVVRETN I TES 
AVIOASBALTRSV 
QSLXHLNDLERSL 
CUYORS I AEAYAR 
ACNNEUTDYNSRA 
LOECCBTUADNES 
LPUKAMANNTOLN 
GRYCC I SEOX I BR 
E N I AHTENAUTOR 
TUNBADQCNRPAN 
KNGT FAPOSTOSA 
NDULRIEDRIUDY 
ASEREDAEHTESD 
JERCICTHRIZAR 


Word list: 

Get 

Post 

Validation 

Submit 

Mandatory 

Options 

Secure 

Unencode 

Header 

Status 
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命 







命 




It’s time for another episode of “GET or POST?” It’s up to you to decide which 
request method is best for each of the following web apps. 


GET or POST 



Login to see my 
favorite rock items 



Request today's 
house blend 






Update journal 

with wew cwtry - ► 



Enroll m an 
Advanced Yoga class 


► 


Puy Tush" from iTowcs 
with my credit card 



* * 

* * 


* * 

* * 

* * 
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exercise solutions 



Word Search Solution 



Word list: 

Get 

Post 

Validation 

Submit 

Mandatory 

Options 

Secure 

Unencode 

Header 

Status 
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post requests 


命 


命 



命 








It’s time for another episode of “GET or POST?” It’s up to you to decide which 
request method is best for each of the following web apps. 


GET or POST 



Login to see my 
favorite rock items 




♦ 

rn usually mvolvcs d uscv-^amc 
ar\dl passy/ov*d—you *to sctuv-c 

•t^a 七 sov-t <^f m-foV-matioir\. - 





Request today's 
house blend 






* 



Thcirc s ho heed io 个 

use POST -foir a 
simple item v-c^ucs-fc. 


Update journal 
with wcw entry- 







Enroll in an 
Advanced Yoga class- 




TKis mi^vt 30 c*i*tKcv- >way. 

/\vc *thcvc usev dvcdc^tiaU 
be'm^ scir>*t? |s *tKc cyrtvy 
f>ubl'id ov pv*Wa*tc? 广 

0 ¥ 


* 


Puy "Push" from iTowcs, 
with my credit card 


办 yohe ^ali<iious. 


* 



SW” CYtd\i card m-fo 一 ^ 

ygC^ilVCS P3\^d SOW^'tW ’％ 

move sctuv-C) l»kc SSL. 
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appendix r. lefeVers 


，/ le Top FiviTopics^ 

♦(we didn’t cover) 



It’s been a long ride... and you’re almost to the end. 


We can barely stand to let you go, but before you do, there’s still a few things left 


to cover. We can’t possibly fit everything about Ajax into one 600-page book. Well, 
actually, we tried that... but marketing felt that a 28-pound technical book wouldn’t do 


too well on the shelves. So we threw out everything you didn’t really need to know 


and kept the last few important bits in this appendix. 


That’s right... this really is the end. Well, except for one more short appendix... and the 
index (truly, a must-read). Oh, and a few ads in the back... well, you get the idea. 


this is an appendix 
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inspecting the dom 


# 1 Inspecting the POM 


By now, you’re a pro at using the Document Object Model to update 
your web pages on the fly. But once you’ve used the DOM to make 
changes to your page, how can you see exactly what the web browser 
sees? The answer is to use a DOM inspector: 



seled: VOM Ihs^cc-toY'. 


如 Purlin 


MM Vb |-^ 3L 


■ 


rmm 


shoe 




DOM< Inb-petlos 


n help 


■ ■ U,Jhi [ nmjlimifcij i'rhipTJwi^glpIpujjlf 1 htnU* 

,v jg wlah^ WMNndr 


Ini-HCE 


微 I 


i!« urrfnl 


Lwi. 


hDM 4 




iDfl^qppt 




Irtlr; h^ix 






J^r^9 


JiyBfTM 


Jlr-ifl 


M>rH 

i^r 4 L 4 [ 


flPXl 


■LfKE 


JCFll 


5 咖 *£ 




ilpxl 


You tv^c POM 

tvee a,d^ko, a，ode 

W td 办 U 如寸 fat 

POM tvcc- 



You have to request that the DOM 
inspector be installed on Windows. 

When you’re installing Fire fox, select Custom Install, 
and then Web Developer Tools. That will get the 
DOM inspector running on Windows machines. 
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Inspecting the POM iw Internet Explorer 


You’ll need to download and install a separate tool for inspecting the DOM on 
Windows, using Internet Explorer. IEInspector is a tool that includes a DOM 
inspector for Internet Explorer as well as an HTTP Analyzer tool). Here’s 
exactly what you need to do:. 

Where to get it: http://www.ieinspector.com/dominspector/ 

How to use it: Download and install the .EXE for 

IEInspector. You can then launch the tool 
and view a page, its markup, and its DOM 
tree all in a single window. 
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dom inspection and json libraries 


Inspecting the POM m Safari 

To inspect the DOM in Safari, you’ll need to use WebKit. WebKit is 
the open-source system framework used by Mac OS X apps like Safari, 

Dashboard, and Mail. You can get it from http://webkit.opendarwin.org/. 

Once you’ve downloaded WebKit, drag it into your Applications folder. Then 
you’ll need to run the following command in a terminal window: 

defaults write com.apple.Safari WebKitDeveloperExtras -bool true 

Now go to your Applications folder and open WebKit. Right- 
click anywhere on your page, and select “Inspect Element:’’ 
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Graceful degradation 

One of the thorniest issues in Ajax is graceful degradation: how do 
you ensure that your app works for browsers without JavaScript enabled 
(or with a really old version of JavaScript). Since this is such a tricky 
topic, and lots of folks are designing apps targeted specifically at modern 
browsers, we’ve had to leave the topic for an appendix. 


Still, if you’re interested in creating a user experience for every possible 
visitor, here’s what you’ll need to do: 






Start out by designing a JavaScript-free site. 

This is the biggest difference in building degradable sites. You can’t start 
with an Ajaxian site and then create code to “fall back” to a non-Ajax 
site; there’s no code that runs on a non-JavaScript browser. 

So you’ve got to create a site that works well without any JavaScript. 
This is why most designers simply ignore non-JavaScript browsers. 

Use <a> elements and Submit buttons liberally. 

No JavaScript means no event handlers. When you’re stripped of 
onBlur and onClick, the only markup you can use to trigger action 
is an <a> element (a link) and a form submit button. You should use 
those elements a lot since they’re the only way to initiate server-side 
processing from a non-JavaScript page. 

Write server-side programs that don’t assume Ajaxian 
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requests. 

Writing a server-side program that responds to an asynchronous request 
isn’t fundamentally different from writing a program that responds to 
a form submit. The big difference, though, is in what that server-side 
program returns. The response to a validation request from an Ajax page 
might be “okay ”； but how can a non-JavaScript page interpret “okay ”？ 


Instead, your server-side programs usually need to figure out, based on 
request parameters, what’s making a request. Then, based on that, your 
programs will need to return different data. So for an Ajax request, your 
program might return a short response; for a non-Ajax request, the 
response might be a new XHTML page or redirect. 


Test ， test ， test... and then test some more. 

The biggest issue in graceful degradation is testing. Even if you build 
a non-JavaScript version of your page and use the right elements and 
server-side programs, you’ve got to test your pages on every browser you 
can think of. In particular, once you’ve added in an Ajax version of the 
page, test on those non-JavaScript browsers a few more times. You never 
know what’s crept in as you’ve added interactivity. 
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script.aculo.us and the Yahoo UI libraries 


You’ve already seen a bit about some of the cool Ajax toolkits and frameworks 
out there, and we mentioned script.aculo.us as one of those. Really, though, 
script.aculo.us is more of a user interface (UI) toolkit. There are more UI 
libraries out there, too. All of them are focused on making it easy to build nice, 
user-friendly, and sometimes visually amazing user interfaces. 

These libraries are usually just JavaScript files you can download and 
then reference in your XHTML pages, whether the page is connected to 
asynchronous JavaScript or not. 


script.aculo.us 


Where to get it: http://script.aculo.us/ 
How to use it: 

<head> 
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<title>Webville Puzzles</title> 

<link rel= n stylesheet” href= n css/puzzle.css n type= M text/css M /> 

<script type= n text/javascript” src="http : //script.aculo.us/prototype.js"X/script> 
<script type="text/javascript" src= n http : //script.aculo.us/scriptaculous.js n X/script> 
<script type="text/javascript" src= M utils.js"> </script> 



etc 
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Yahoo Ul (YUI) 




pages. 
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Where to get it: http://developer.yahoo.com/yui/ 

How to use it: 

<head> 

<title>Webville Puzzles</title> 

<link rel= n stylesheet" href="css/puzzle.css" type= n text/css n /> 

<script type= n text/javascript" 

src= n http : //yui.yahooapis.com/2.5.2/build/yuiloader/yuiloader-beta-min. js"></scr^pz> 
<script type= n text/javascript" 

src= n http : //yui.yahooapis.com/2.5.2/build/dom/dom-min.js n X/script> 

<script type= n text/javascript" 

src="http : //yui.yahooapis.com/2.5.2/build/event/event-min.js"X/script> 

<script type= n text/javascript" 

src= n http : //yui.yahooapis.com/2.5.2/build/animation/animation-min.js M X/script> 
<script type= n text/javascript" 

src="http : //yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.j s M X/script> 
<script type= n text/javascript” 

src="http : //yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"X/script> 

<script type= M text/javascript" src="http : //yui.yahooapis.com/2.5.2/build/button/button- 
min. js M X/script> 

<script type= n text/javascript" src= n utils.js M > </script> 


etc ... 
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json and php 


# 4 Using JSON libraries m your PHP code 

You’ve already seen how JSON can help you send and receive complex objects 
in your Java apps. But for PHP scripts, you’re going to need a library if you 
don’t want to type in your JSON-formatted data manually. That’s a pain, so 
having a JSON library is a big deal for server-side JSON interaction. 

Here’s how you can use JSON in your PHP scripts, without getting into lots of 
JSON-specific syntax in your PHP: 

Where to get it: It’s included with PHP 5.2.0 and later 

How to use it: Call json 一 encode () and pass in your 

PHP variables and data. 





JSON suffov-b is o-f 

PHP, so so\a do^i *to do 
rn 70UV PHP 
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Using JSON iw PHP 5.1 awd earlier 

Say you’re not using PHP 5.2, and you can’t get your system upgraded (or 
don’t want to). In that case, you’ll need to download a library to get PHP 
working with JSON on your server. 


This lib\ra\ry is V"obus*t, c3sy -to 
use, a^d fa^kajcd up ihvoujli 

PEAR (oy easy addess. 


Where to get it: http://pear.php.net/pepr/pepr-proposal-show.php?id=198 



How to use it: 
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Create a new Services 一 JSON object, and pass your PHP 
data to the encode () method on that object. 


require_once( 1 JSON.php'); 

$json = new Services—JSON(); 

$itemGuitar = array( 

▼id* => 'itemGuitar *, 

▼ desciription * = > 1 Pete Townshend ones played this 

guitsir while his own a_xe was in the shop having 
bits of drumkit removed from it.', 

1 price ' —> 5 6 95 . 99 , 

▼ urls f => array ( ' http : / / www . thewho . corn/ ', 

▼http://en.wikipedia.org/wiki/Pete_Townshend') 


- ^ 

$output = $json->encode($itemGuitar); 
print($output); 
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asp.net ajax 


巧 Ajax and ASP.NET 

If you’re frequently working with Microsoft technologies, you may want to 
look into ASP.NET Ajax. ASP.NET Ajax is Microsoft’s free, proprietary 
version of Ajax that hooks into Visual Studio 2008 and the rest of the 
Microsoft technology stack. 

Because ASP.NET Ajax is built to work with Microsoft’s visual products, it’s 
more of a drag-and-drop set of front end controls, along with the ability to 
build code to “back” those controls. 

You can find out all you ever wanted to know about ASP.NET Ajax at 
http:/ / www.asp.net/ajax. 
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You dow't NEEP ASP.NET Ajax to build 
Iwtcrwet Explore 卜 compatible web apps 

There are a lot of good reasons to dig into ASP.NET Ajax if you’re working 
on or for a hardcore Microsoft product or shop. And if you’re already 
building apps using Visual Studio, then ASP.NET Ajax will drop right in 
with what you’re already doing. 

But if you’re just building web apps that you want to work on Internet 
Explorer — as well as other browsers like Firefox and Safari — then you don’t 
need ASP.NET Ajax. You can use the techniques you’ve already learned, 
along with the DOM and request creation utility methods, to get your apps 
working on all major browsers. 
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appendix ii ： utility functions 




Just Gimme \the Code 



Sometimes you just want everything in one place. 

You’ve spent a lot of time using utils.js, our little utility class of Ajax, DOM, 
and event utility functions. Inside these pages, you’ll get all those functions 
in one place, ready to put into your own utility scripts and applications. Take 
one last chance to familiarize yourself with these functions, and then get to 
work on your own utilities! 


this is an appendix 
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utils.js 


utils.js: a work iw progress 

Here’s the code we’ve got so far for utils . j s. But why stop here? You should 
add your own functions into utils.js. Need a handy reusable function for 
getting the text out of a node? Put that function in utils.js. 

Over time, utils.js should become your own personal framework. 


function createRequest() { 

try { 

request = new XMLHttpRequest() 
} catch (tryMS) { 

try { 





request = new ActiveXObj ect("Msxml2.XMLHTTP"); 
catch (otherMS) { 

try { 


TK'lS IS ov\t vcv-s'ion 
Mitv-oso^Vs v-c<\ucs*t object 


•3hd s -the othev-. 




request = new ActiveXObj ect("Microsoft.XMLHTTP"); 
catch (failed) { 


request = null 


Wc v*c*tuv*r> y>ull, so *tV>C 
pvoyam -fi^uvc ou*t ho>w 
-to v-cpov*t OV handle cv-v-ov. 


w the ^ d id 

““ 扣 dl C p,oIU, 


return request; 
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function isArray(arg) { 

if (typeof arg == 'object') { 

var criteria = arg.constructor.toString().match(/array/i); 
return (criteria != null); 


return false 
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utility functions 



function getActivatedObject(e) 
var obj; 
if ( !e) { 

// early version of IE 


This -takes av\ object 

3y\d vc*tuvr\s object 七 ha 七 
•tv'i^cvcd event 



ob j 


window.event.srcElement 


旧 S ^ es activated 
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else if (e.srcElement) 
// IE 7 or later 


ob j 


else 


e.srcElement 
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七 he 6vcr\*t object. 


// DOM Level 2 browser 


ob j 


e.target 


return obj 


P^ty the ob jc 7 ' ^ 


function addEventHandler(obj, eventName, handler) 


if (document.attachEvent) 
obj.attachEvent("on" 



eventName, handler); 


else if (document.addEventListener) { 

obj•addEventListener(eventName, handler, false); 
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Symbols & Numbers 

<a> elements 134 
<script> tag 12, 50, 51, 57 
404 status code 36 

A 

activated object 166 

ActiveXObject 21 

Microsoft browsers 64 
addEventHandlerO 164, 165, 187 
this keyword 424-425 

addEventListener() 142 ， 143, 147, 149 ， 150， 164 
event objects 160 
addLetter() function 298, 308 
Ajax 

benefits of 10 
design principles 47 

expecting the unexpected 79—81 
interactions 66 

Framework and Do-It-Myself JavaScript 332—333 

library (see frameworks and toolkits) 

request objects 398 

what is 4-5 

when to use 11 

alert() function 58-59, 157, 428 
ampersand (&) 454 
appendGhild() 255, 305 

applications 

new approach 3 
traditional approach 2 

arrays 394 

ASP.NET Ajax 480-481 


asynchronous applications 71, 173—228 ， 176, 187 
checkPasswordO event handler 190—191 
handling events 187 
Mike’s Movies 181 
monitor functions 209—213 
callbacks 211 

update Register button 211 
when to call 210 
objects 

share same name 195 
storing callback functions 197 
one request object 196 
ordering requests and responses 203-204 
servers 

handling events 186 

sending a request object to the server 186 
setlnterval() 221—222 
showPasswordStatus() callback 190—191 
status variables 212—213 
two request objects 198 

asynchronous requests and responses 5, 8, 10—11 ， 46, 
173-175, 197, 218-219, 314, 443 

attachEvent() 149, 150, 164 
event objects 160 

B 

behavior, separating from content 82-84 
benefits of Ajax 10 
book examples download 14 
branch 242 

browser-level updates 10 

browsers 65, 73 
callbacks 76 

cross-browser applications 148 
DOM trees 363 

how they see your XHTML 234 
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browsers (continued) 

new DOM nodes 302 

requests 10 

tree structure 236 

Bullet Points 

asynchronous requests 8 
browsers 65 

buttonOver() function 135 

c 

callbacks 23, 27, 33, 35, 50, 66, 76 
checkPassword() event handler 190—191 ， 200—201 
checkUserName() function 56, 70, 200—201 
child 242 

childNodes 308, 320, 357 
child nodes, adding 255 
clear text 449—450 

client-side code, validating format 420-421 
code 

reuse 60, 62—63 
writing large piece 296 

coding violation 419 

color rendering 10 

compatibility issues 10 

compiled languages 392 

consistency 414 

constraints 414 

content, separating from behavior 52, 82-84 

Content-Type 463 
request header 461 
content versus structure 230—231 
context-specific graphics 104 
createAttribute() 303 
createElement() method 301-302, 303 
createRequest() function 13, 20, 22, 25, 50, 61-66, 154 


createTextNode() 303 

cross-browser 

applications 148 
utility functions 154 

CSS 5, 100-101, 108 
classes 120， 134 
images 133 
positioning 289—290 
presentation 82-84, 293 

CSV (comma-separated values) 349-351, 354-357 
data 381 

customers, requirements 413 

D 

data 

duplicate 443 

validating format and content 420-421 
descriptive ids 264 
design 113 

DRY: don’t repeat yourself 423 
disabled 21 

displayDetails() function 13, 35, 35—36, 370—371, 395 
display item’s details 13 
divs 12 

document object...Up Close 

creating new parts of a page 233 
finding element by id attribute 233 
finding nodes by tag type 233 
getElementByID() 233 
getElementsByTagName() 233 
root element 233 

DOM (document object model) 5, 143, 229-282 
appendGhild() 255, 305 
as a tool 280 
branch 242 

changing page structure 300 
changing page without reloading 245 
child 242 
child elements 238 
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childNodes 262, 320 
createAttribute() 303 
createElement() 303 
createElement() method 301—302 
createTextNode() 303 
dynamic application 244-245 
elements 

changing versus moving 252 
locating by name or id 256 
insertBefore() 305 
inspecting 472—474 
leaf 242 

manipulating 283—328 
(see also Woggle) 
new nodes 302 
next Sibling 262 
nodeName 306-307 
nodes 242, 254 
adding child 255 
node Value 306—307, 320 
objects 237 
parent 242 

parentNode property 254, 262 
parselnt 320 
previous Sibling 262, 320 
remove Child 320 
removeNode() 305 
replaceNode 320 
root element 242 
text node 274, 275 
trees 243, 248-251 
browsers 363 
Webville Puzzles 248-251 
what is 232 
XHTML to 234-235 
xml requests and responses 359 

DOM Inspector 472—474 
Firefox 472 
Internet Explorer 473 
WebKit 474 

DOM Level 0 143, 164 
event handlers 158 

DOM Level 1 143 


DOM Level 2 143, 144, 164 
Event argument 161 
event handlers 158 
Firefox 162 

Internet Explorer 149， 162 
Opera 162 
Safari 162 

DOM tree 

family relationships 262 
whitespace 272—273 
XML response 360-361 

Don’t Annoy Your Users 47 
dot notation 382 

DRY (Don’t Repeat Yourself) 423, 425 
duplicate data 443 
dynamic data 394 

E 

elements 

changing versus moving 252 
locating by name or id 256 

email addresses, exposed 448 

escape() 450 

eval() function 385, 387—388, 392, 398, 401 
warnings variable 436 
Event argument 161 
event framework 159 

event handlers 104, 119, 140, 426-428 
connecting 107 
DOM Level 0 158 
DOM Level 2 158 
event objects 160 
Internet Explorer 159 
multiple 142, 424—425 
new 187 
properties 141 
Woggle 295-296 
(see also multiple event handlers) 

Event Handlers Exposed 53 
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event listeners 144 
event objects 160 

events 93—138 

images 132—133 

interactivity 104 

onblur 106 

onclick 106, 107, 122 

onerror 106 

onfocus 106 

onload 106 

onmouseout 106， 122 

onmouseover 106 ， 107, 122 

onresize 106 

onsubmit 106 

window, onload 106, 107, 108 

F 

Firefox 148—150 

DOM Inspector 472 
DOM Level 2 162 

properties, methods, and behaviors 164 
Fireside Ghats 

Ajax Framework and Do-It-Myself JavaScript 
332—333 

asynchronous and synchronous applications 227 
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